DateTime Picker Demo

Use datetime calendar to choose a date and/or time from a popup calendar. This can be used as a replacement for the bootstrap-ui datepicker-popup control


Pick a date

{{ ctrl.dates.date1 }}


Pick a time

{{ ctrl.dates.date2 }}


Pick a date and time

{{ ctrl.dates.date3 }}


Pick two dates to calculate difference

Pick a date range, using two dates. Use minDate and maxDate to make sure your end date cannot be before your start date and vice-versa

{{ ctrl.dayRange }} (days)

Global Configured DateTime Picker

Date picker only passes in the model and isOpen parameters, the rest are determined by the constant uiDatetimePickerConfig

{{ ctrl.dates.date6 }}

Use bootstrap dropup class

Use dropup to make the dropdown menu go upwards instead of down. NOTE: Cannot currently use append-to-body="true" with dropup class

{{ ctrl.dates.date7 }}


View Mode

Use a particular view mode only for the datepicker.

{{ ctrl.dates.date8 }}