Flatpickr

Basic Date Picker #

Get started with the basic datepicker without any config. Set the data-datepicker attribute to any regular date input element.

Copy <input type="text" data-datepicker class="form-control" placeholder="Select date.." />

Form Control #

You should wrap the date input element with form-control in order to use the options of the regular input element, like size options and the input groups.

Copy <div class="form-control form-control--lg"> <input type="text" data-datepicker placeholder="Select date large.." /> </div> <div class="form-control"> <input type="text" data-datepicker placeholder="Select date base.." /> </div> <div class="form-control form-control--sm"> <input type="text" data-datepicker placeholder="Select date small.." /> </div>

Basic Time Picker #

You can switch the datepicker out with the timepicker by setting more options provided by Flatpickr. Take a look at the example:

Copy <input type="text" data-datepicker data-datepicker-enable-time="true" data-datepicker-no-calendar="true" data-datepicker-date-format="H:i" data-datepicker-time_24hr="H:i" placeholder="Select time.." class="form-control" />

Disabled State #

Follow this examples to apply the disabled option.

Disabled date

Copy <label class="form-control"> <input type="text" data-datepicker disabled /> </label> <fieldset class="field" disabled> <label class="field__label">Disabled date</label> <div class="form-control"> <input type="text" data-datepicker /> </div> </fieldset>

Initializing #

You can use one of these two methods to initialize the Tom Select instance.

Via Data Attributes #

The easiest way to initialize the Flatpickr instance is by using data attributes. We already gave examples of how to use this method above. If you haven't checked it out yet, just scroll back to the top.

Just set the data-datepicker attribute to the native input element and you are done. If you want to pass flatpickr options, you can add more data-datepicker-{key}="{value}" to it. The value can be a standard string or JSON formatted.

Via Javascript #

Initialize the flatpickr instance by calling the DatePicker.createInstance(element, settings) function.

Copy const inputEl = document.querySelector('#myDateInput') const options = { enableTime: true } const instance = DatePicker.createInstance(inputEl, options)

Function	Description
DatePicker.createInstance(element, options)	Create a Flatpickr instance.
DatePicker.getInstance(element, options)	If any, get the Flatpickr instance.
DatePicker.getOrCreateInstance(element, options)	Get the Flatpickr instance if there is one. Create it if necessary.
DatePicker.destroyInstance(element)	To destroy a Flatpickr instance. Usually called before removing the element.
DatePicker.dataApi(wrapperElement)	Execute the Data API within the specified wrapperElement.

API #

If you need more than that, please check out their official docs directly. There are more examples that you can try out as well.