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

{{ 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' }}