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 using angular-date-time-input directive

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 - somewhere near the middle of the display - is disabled on each view

dropdownSelector: '#dropdown6' to toggle the dropdown.

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

Embedded calendar with configureOn

Every time you click the button, the startView is changed

configureOn: 'config-changed' to cause the directive to re-read its configuration.

Start View: {{ config.configureOnConfig.startView }}

Embedded calendar with renderOn

Every time you click the button, the selectable attribute is toggled.

renderOn: 'valid-dates-changed' to cause the directive to re-render.

Date range picker

Every time you select a start date, dates before the start date are disabled in the end date.

This is a little more complex than the other examples.

Start Date: renderOn: 'end-date-changed' to cause the directive to re-render when the end date changes, and data-on-set-time="startDateOnSetTime()" to broadcast when the start date changes, and finally data-before-render="beforeRenderStartDate($dates)" to disable the dates after the selected end date.

End Date: renderOn: 'start-date-changed' to cause the directive to re-render when the start date changes, and data-on-set-time="endDateOnSetTime()" to broadcast when the end date changes, and finally data-before-render="beforeRenderEndDate($view, $dates, $leftDate, $upDate, $rightDate)" to disable the dates before the selected start date.

NB: It is possible that data coming from the server (or via a defect in the controller) that the start date is after the end date. To allow the user to get themselves out of this situation, your implementation might not disable any dates if the start date is greater than the end date.