Website / Docs, GitHub, npm
Turns a text input into a calendar for date/time picking.
Flatpickr is a flexible, stylish calendar widget for providing users with an easy way to select a date, time or a date range.
Basic Usage
Date pickers are initialized by data-attributes on page load. Options are provided to the Flatpickr library via data-attributes.
A full list of options with defaults can be found at the Flatpickr Docs.
To use Flatpickr in its most basic form, add data-flatpickr to an input element. The input's value will be empty, and the picker will appear when the input element is clicked. Adding a placeholder is advised to indicate
to the user to click the input.
Demo
<input class="form-control" type="text" placeholder="Select a Date" data-flatpickr>
Continue reading for more advanced options such as formatting the date string and setting date ranges.
Options
Options are provided to Flatpickr via data attributes on the input element.
Data attributes follow a different format to the native options found in the Flatpickr documentation - all data attributes begin with data- and the option is all lower-case, with a hyphen between words.
For example:
allowInput becomes data-allow-input
defaultDate becomes data-default-date
A full list of options with defaults can be found at the Flatpickr Docs.
Readable format
Adding further options via data-attributes opens up Flatpickr's flexibility.
The data-alt-input option will hide the original input and create a new input with easy-to-read date format. The original input's value will be updated by Flatpickr and will be sent to server.
To change the format of the alternative input, use the data-alt-format attribute. Find a list of valid formatting tokens at the Flatpickr Docs.
Demo
<input class="form-control" type="text"
data-flatpickr
data-alt-input="true"
data-date-format="Y-m-d">
Enable Time Picker
Flatpickr has a time picker also.
Adding to the above example, the data-enable-time option shows a time picker in the calendar widget when a date has been selected.
Demo
<input class="form-control" type="text"
data-flatpickr
data-alt-input="true"
data-enable-time="true"
data-date-format="Y-m-d H:i">
Preload Date Value
To initialize the input with a value, add the data-default-date attribute. Provide a date in the format yyyy-mm-dd.
The preloaded date may also contain a time value such as yyyy-mm-dd h:m.
Demo
<input class="form-control" type="text"
data-flatpickr
data-alt-input="true"
data-enable-time="true"
data-default-date="2022-04-23 13:30"
data-date-format="Y-m-d H:i">
Date Range
To initialize the input with a value, add the data-default-date attribute. Provide a date in the format yyyy-mm-dd.
The preloaded date may also contain a time value such as yyyy-mm-dd h:m.
Demo
<input type="text"
data-flatpickr
data-alt-input="true"
data-mode="range"
data-date-format="Y-m-d"
data-alt-format="F j"
data-default-date="2022-04-08">
Time Picker only
Flatpickr can also function as a time picker without showing a calendar.
Add data-no-calendar="true" and change the data-default-date to represent a time only. data-date-format may also be changed to a time-only format.
Demo
<input type="text"
data-flatpickr
data-alt-input="true"
data-enable-time="true"
data-no-calendar="true"
data-date-format="H:i"
data-default-date="13:45">