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

"2015-03-01T00:00:00.000Z"

---

Pick a time

• timepickerOptions - showMeridian=false, readonlyInput=true

Time

model

"2015-03-01T12:30:00.000Z"

---

Pick a date and time

Both

model

"2025-04-15T01:50:33.045Z"

---

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

10 (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

"2025-04-15T01:50:33.045Z"

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

"2025-04-15T01:50:33.045Z"

---

View Mode

Use a particular view mode only for the datepicker.

Date

model

"2025-04-15T01:50:33.045Z"

---

Default Time

Set a default time when choosing a date

Both

model

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

---

Save As ISO

ISO

On Close

2025-04-15T01:50:33.045Z

---