DateTime Picker Demo

Pick a date

• dateDisabled used, todays date is disabled when the picker is displaying days
• closeOnDateSelection="false"
• datepickerOptions - showWeeks=false, startingDay=1

Date

model

{{ ctrl.picker1.date }}

---

Pick a time

• timepickerOptions - showMeridian=false, readonlyInput=true

Time

model

{{ ctrl.picker2.date }}

---

Pick a date and time

Both

model

{{ ctrl.picker3.date }}

---

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

From

To

Difference

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

Both

model

{{ ctrl.picker6.date }}

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

Date

model

{{ ctrl.picker7.date }}

---

View Mode

Use a particular view mode only for the datepicker.

Date

model

{{ ctrl.picker8.date }}

---

Default Time

Set a default time when choosing a date

Both

model

{{ ctrl.picker9.date }}

Min / Max times

Pick a minimum time in 1 picker and a maximum time in another picker. The opposite picker will disable so you cannot overlay the ranges

Min

Max

---

Customize Button bar

Date

---

Call function when closed

Date

On Close

{{ ctrl.closedArgs }}

---

Save As ISO

ISO

On Close

{{ ctrl.picker14.date }}

---