Drop-down Datetime with input box

No formatting

Notice that you cannot enter a date with the keyboard.

dropdownSelector: '#dropdown1' to toggle the dropdown.

Formatted Date: {{ data.dateDropDownInputNoFormatting | date:'medium' }}

Drop-down Datetime with input box

Localized formatting Not implemented yet

Notice that you CAN enter a date with the keyboard.

dropdownSelector: '#dropdown2' to toggle the dropdown.

Formatted Date: {{ data.dateDropDownInput | date:'medium' }}

Drop-down Datetime with input box

Default configuration

data-on-set-time='inputOnTimeSet()' to toggle the dropdown.

Formatted Date: {{ data.inputOnTimeSet | date:'medium' }}

Drop-down Datetime form integration

dropdownSelector: '#dropdown4' to toggle the dropdown.

This example shows a date picker that has the required attribute. Note that the user must type into the input to toggle dirty/pristine.

Formatted Date: {{ data.dateDropDownWithInput | date:'yyyy-MM-dd h:mm a' }}

dirty pristine valid invalid

Drop-down using text link

dropdownSelector: '#dropdown5' to toggle the dropdown.

Formatted Date: {{ data.linkCalendar | date:'medium' }}

Click here to show calendar

Show / hide with check box

startView: 'day' and minuteStep: 15

data-on-set-time='checkboxOnTimeSet()' to toggle visibility.

Formatted Date: {{ data.checkboxCalendar | date:'medium' }}

Click me to show/hide via ng-show:

Embedded calendar

Default configuration

Formatted Date: {{ data.embeddedYear | date:'yyyy-MM-dd h:mm a' }}

Embedded calendar form integration

This example shows a date picker that has the required attribute. Note that without an input, only validity is tracked by ngModel.

Formatted Date: {{ data.formDate | date:'yyyy-MM-dd h:mm a' }}

dirty pristine valid invalid

Embedded calendar with property configuration

data-datetimepicker-config="config.datetimePicker"

which returns { startView: 'year' }

Formatted Date: {{ data.embeddedPropertyConfig | date:'yyyy-MM-dd h:mm a' }}

Embedded calendar with function configuration

data-datetimepicker-config="configFunction()"

which returns { startView: 'month' }

Formatted Date: {{ data.embeddedFunctionConfig | date:'yyyy-MM-dd h:mm a' }}

ng-repeat with drop-down using text link

data-on-set-time="guardianOnSetTime($index, guardian, newDate, oldDate)"

{{ guardian.name }}

DOB: {{ guardian.dob | date:'yyyy-MM-dd' }}

Click here to show calendar

Drop-down Datetime with restricted dates

One date is randomly disabled on each view

dropdownSelector: '#dropdown6' to toggle the dropdown.

Formatted Date: {{ data.dateDropDownInputNoFormatting | date:'medium' }}