# 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

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