luid-date-picker

A directive to pick a date in a calendar, a bit like the datepicker from angular ui bootstrap but with different options

For example you can use it with a moment, a date or any string if you provide a format

It exists inline or in a popup.

Supported arguments:

ng-model: the variable to bind to

format: the format of the ng-model variable, moment, date or any format usable by momentjs, default moment

min: self explainatory

max: self explainatory

custom-class: a function taking in a moment and returnung a string to apply specific classes to some days

displayed-months: number of months you want displayed next to one another, default 1

display-format: unused inline, the format to use to display the selected date in the input, will use format if you provided any or the format L if you didn't

disable-keyboard-input: unused inline, a self explainatory boolean, default false

shortcuts: unused inline, a list of objects { label: "string", date: "your format of date" } to be displayed under the calendars to easily select a certain date

grouped-shortcuts: unused inline, like shortcuts but you want them displayed on several lines for consistency, for example you want on one line yesterday, today, tomorrow and on another last week, this week, next week

Usage

<luid-date-picker ng-model="myDate"></luid-date-picker> <luid-date-picker ng-model="myDate" format="YYYY-MM-DD" displayed-month="3"></luid-date-picker> <luid-date-picker-popup ng-model="myDate" display-format="dddd Do, MMMM"></luid-date-picker-popup>

Demo

Basic use, linked to a moment

My date: {{ dateMoment | luifMoment : "LL"}}

Linked to a string with format YYYY-MM-DD

My date: {{ dateStr }}

Linked to a date

My date: {{ dateDate }}

In a popup, to be easily incorporated in a form

displaying the date with the LL format but binded to a string with the L format

value in my $scope: {{ datePopup2 }}

with min/max

With dynamic min and max

Select a min and max in the inputs below

Min

Max

validity: ng-valid ng-invalid ng-invalid-{{key}}

with custom classes

this one applies the class disabled to weekends

this one highlights the current week

In a popup, with keyboard input enabled

Disable keyboard input

Min Max

selected date = {{keyboardPopup}}

With multiple months displayed at once

With multiple months displayed at once in a popup