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.

Colors