Date Time Picker

BCI Date Time Picker (Web-Component)

Interactive Example

Label Placeholder Calendar Time Calendar + Time Disable Disable Templates

Date Selection

Time Selection

Date and Time Selection

Date and Time
Range
Range (no seconds)
Date with one Template (visible as button instead of template list)
Range with Templates
Range with Template Groups
Range (with seconds)
Range (time-format HH:mm:ss)
Range (time-format hh:mm:ss a)
Range (time-format HH:mm a)

Angular Datepicker

Options

Activate touch interface Filter odd months and dates Disable datepicker formfield Start in year view

Result example

{{resultPickerModel.hasError('matDatepickerParse') && resultPickerModel.getError('matDatepickerParse').text}} is not a valid date! Too early! Too late! Date unavailable!

Last input: {{lastDateInput}}

Last change: {{lastDateChange}}


Disabled Datepicker Examples

Input disabled datepicker

Datepicker with placeholder

Input disabled via FormControl


Datepicker with value property binding