A datepicker is a text input to capture a date. You can select a single date, date range or date and time.
Examples and usage
Date picker
For selecting only one date.
<div id="form_birth_date" class="datepicker_container">
<label for="ev_person_birth_date">Birth date</label>
<span class="input">
<div class="datepicker js-datepicker">
<div class="datepicker--date js-datepicker--date">
<input type="text" name="ev_person[birth_date]" value="" maxlength="10" data-input="1" data-min-date="1830-01-01" data-max-date="2020-12-31" id="ev_person_birth_date" class="flatpickr-input active">
<i class="far fa-calendar-alt" data-toggle=""></i>
</div>
</div>
</span>
</div>
Time picker
For selecting time only.
24-hour clock
<div class="form-group">
<div class="datepicker js-datepicker js-bind-custom js-time-24">
<div class="datepicker--time js-datepicker--time ">
<input type="text" name="ev_event[start_date][time]" value="12:00" data-input="1" class=" ev-widget-time" maxlength="8" id="ev_event_start_date_time" data-_extension-text-contrast="">
<i class="far fa-clock" data-toggle=""></i>
</div>
</div>
</div>
12-hours clock (AM/PM)
<div class="form-group">
<div class="datepicker js-datepicker js-bind-custom js-time-12">
<div class="datepicker--time js-datepicker--time meridiam-time">
<input type="text" name="ev_event[start_date][time]" value="12:00 AM" data-input="1" class=" ev-widget-time" maxlength="8" id="ev_event_start_date_time" data-_extension-text-contrast="">
<i class="far fa-clock" data-toggle=""></i>
</div>
</div>
</div>
Date and time picker
For selecting date and time. The field for selecting time appears after selecting a date.
Date and time picker (24-hour clock)
<div class="datepicker js-datepicker js-bind-custom js-time-24">
<div class="datepicker--date js-datepicker--date">
<input type="text" name="ev_event[vp_invitation_displayed_to][date]" value="" data-on-change="eventTimeCheck" maxlength="10" data-input="1" data-min-date="2015-01-01" data-max-date="2025-12-31" id="ev_event_vp_invitation_displayed_to_date">
<i class="far fa-calendar-alt" data-toggle=""></i>
</div>
<div class="datepicker--time js-datepicker--time">
<input type="text" name="ev_event[vp_invitation_displayed_to][time]" value="" data-input="1" maxlength="5" id="ev_event_vp_invitation_displayed_to_time">
<i class="far fa-clock" data-toggle=""></i>
</div>
</div>
Date and time picker (12-hour clock)
<div class="col_wide datepicker_container">
<label for="ev_event_end_date">End date</label>
<span class="input date_time">
<div class="datepicker js-datepicker js-bind-custom js-time-12">
<div class="datepicker--date js-datepicker--date"><input type="text" name="ev_event[end_date][date]" value="" data-on-change="eventTimeCheck" maxlength="10" data-input="1" data-min-date="2015-01-01" data-max-date="2025-12-31" id="ev_event_end_date_date" class="flatpickr-input active">
<i class="far fa-calendar-alt" data-toggle=""></i>
</div>
<div class="datepicker--time js-datepicker--time meridiam-time"><input type="text" name="ev_event[end_date][time]" value="" data-input="1" maxlength="8" id="ev_event_end_date_time" class="flatpickr-input">
<i class="far fa-clock" data-toggle=""></i>
</div>
</div>
</span>
</div>
Flatpickr library offers much more options, like multi-value date picker, range date picker and the time picker placed inside the date picker. For more information, visit Flatpickr website.
Design guideline
Elements
Date and time pickers consist of the standard input fields with labels that are styled in the Form component and the Flatpickr which provides main styling and functionality for these components. Each datepicker is placed inside the div with the datepicker class.
Usage guideline
Javascript
The date picker is built on top of Flatpickr, so the events and config options that come with Flatpickr is therefore available to the date picker. This includes methods for setting a min date, max date, disabling date(s), specifiying a range of dates, and more.
Localization
Date Picker supports localization, and you can specify the date format by overriding the component option dateFormat. Supported date formats are listed here.
To localize the date picker globally, please follow these instructions.
