--- layout: default route: demonstrations title: Demonstrations --- {% capture calendar_datepicker_example_inline %} {% endcapture %} {% capture calendar_datepicker_example_inline_range %} {% endcapture %} {% capture calendar_datepicker_example %} {% endcapture %} {% capture calendar_datepicker_example_range %} {% endcapture %} {% capture calendar_datepicker_example_range_dialog %} {% endcapture %} {% capture calendar_datepicker_example_dialog %} {% endcapture %} {% capture calendar_datepicker_example_disabled_dates %} {% endcapture %} {% capture calendar_datepicker_example_disabled_weekdays %} {% endcapture %} {% capture calendar_datepicker_example_weekstart %} {% endcapture %} {% capture calendar_datepicker_example_labels %} {% endcapture %} {% capture calendar_datepicker_example_trigger %}
{% endcapture %} {% capture calendar_datepicker_example_trigger_2 %} {% endcapture %} {% include anchor.html name="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
{{calendar_datepicker_example_dialog}}To view a demo just click into the input below:
"Inline" style visually replaces the input element by the datepicker
{{calendar_datepicker_example_inline}}Use the component to let user select a date range.
You can easily customize from and to selection labels.
{{calendar_datepicker_example_labels}}Yesterday and tomorrow are disbaled
{{calendar_datepicker_example_disabled_dates}}Saturdays and Sun days are disbaled
{{calendar_datepicker_example_disabled_weekdays}}Week starts on Monday
{{calendar_datepicker_example_weekstart}} {% include anchor.html name="Custom trigger" %}Use a custom button/icon to trigger datePicker instead of click on input.