Demonstrations

Display styles

Calendar component comes with multiple display styles. The default style will show the datePicker as a popover under the input element on desktop and as a dialog modaal on mobile.

To view a demo just click into the input below:

"Dialog" style displays the DatePicker as a dialog modal

To view a demo just click into the input below:

"Inline" style visually replaces the input element by the datepicker

Range selection

Use the component to let user select a date range.

You can easily customize from and to selection labels.

Design options

Disabled dates

Yesterday and tomorrow are disbaled



Disabled week days

Saturdays and Sun days are disbaled



Change week start

Week starts on Monday

Custom trigger

Use a custom button/icon to trigger datePicker instead of click on input.