Demonstration

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 above.

"Dialog" style displays the DatePicker as a dialog modal

To view a demo just click into the input above.

"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 labels.

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



Highlighted dates

Yesterday and tomorrow are highlighted



Change week start

Week starts on Monday

Colors