Flatpickr

Flatpickr is a flexible, stylish calendar widget for providing users with an easy way to select a date, time or a date range.

1. Include the library in your page

   • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

     <!-- jQuery Countdown (displays countdown text to a specified date) -->
     <script type="text/javascript" src="assets/js/flatpickr.min.js"></script>

     Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

     <!-- jQuery Countdown (displays countdown text to a specified date) -->
     <script type="text/javascript" src="https://unpkg.com/flatpickr@^4.6.6"></script>

2. Load the initializer code in index.js

   • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.

     import mrFlatpickr from './flatpickr';

   • Ensure the following line appears in the export object:

     export {
     mrFlatpickr,
     };

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 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.

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">

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">

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">

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">

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">