Datepicker

When to use it

The Datepicker component is used to allow users to select a date from a calendar interface. It is commonly used in forms where date input is required.

The component depends on the vendor JavaScript Air Datepicker and is activated by adding the attribute data-datepicker on form inputs.

WARNING

Consider using native date pickers when possible. Even though the look of this one is appealing (on desktop) it's often more convenient for mobile users to use the picker built into the browser/OS. This component should primarily be used when the need to indicate available and/or unavailable dates is a must.

Variants

For pickers with time selection, use data-datetimepicker instead.

What it looks like

Todo

Add working JS files here to make the demo work.

Code examples

DatepickerTimepicker

html

<div class="c-form-control">
    <label for="picker1" class="c-label">Date</label>
    <input type="text" id="picker1" data-datepicker data-min-date="2024-02-02" data-max-date="2024-02-22" value="2024-02-20" />
</div>

html

<div class="c-form-control">
    <label for="picker2" class="c-label">Date and time</label>
    <input type="text" id="picker2" data-datetimepicker value="2024-02-21 18:00" />
</div>

Accessibility notes

When relying on a custom date picker, it is important to note that they don't come with the same level of screen reader support as their native counterparts. Although the authors of this third party library has tried to do their best, it's hard to test every scenarion in the multitude of mobile phones, browsers and operating systems out htere.

Datepicker ​

When to use it ​

Variants ​

What it looks like ​