Date Picker

Simple datepicker

Month: {{ date.month }}.{{ date.year }}

Model: {{ model | json }}

Disabled datepicker

Datepicker in a popup

Model: {{ popupModel | json }}

Custom day view

This datepicker uses a custom template to display days. All week-ends are displayed with an orange background.

{{ date.day }}

Multiple months

Inline

Options

Range Date Picker

{{ date.day }}

From: {{ fromDate | json }}

To: {{ toDate | json }}

Time Picker

Basic Timepicker


Selected time: {{time | json}}

Meridian


Selected time: {{meridianTime | json}}

Seconds


Selected time: {{secondsTime | json}}

Spinners

This datepicker uses a custom template to display days. All week-ends are displayed with an orange background.

Custom steps


Selected time: {{stepsTime | json}}

Custom validation

Illustrates custom validation, you have to select time between 12:00 and 13:59


Selected time: {{validationTime | json}}