# Flatpickr

Turns a text input into a calendar for date/time picking

###

About the Plugin

Website GitHub npm

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

###

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

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.3"></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,
         };

###

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

###

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