Syntax

There are multiple ways to create a Flatpickr instance. In all cases, config is optional. The return value will be the Flatpickr instance, or an array of instances.

document.getElementsByClassName("myClass").flatpickr({..config});document.getElementById("myID").flatpickr();$(".calendar").flatpickr(); // jQuery

Or pass in a node directly.

new Flatpickr(HTMLElement, [options]);

Basic Usage

A basic datepicker

Date Formatting

Using dateFormat

<input class="form-control" data-date-format="d-m-Y"><input class="form-control" data-date-format="m/d/Y"><input class="form-control" data-date-format="l, F j, Y">

DateTime Picker

<input class="form-control" data-enable-time="true">

DateTime Picker: 24 Hour Mode

<input class="form-control" data-enable-time="true" data-time_24hr="true">

DateTime Picker with seconds

<input class="form-control" data-enable-time="true" data-enable-seconds="true">

Time Picker

<input class="form-control" data-enable-time="true" data-enable-seconds="true" data-no-calendar="true" value="09:01:45"><input class="form-control" data-enable-time="true" data-enable-seconds="true" data-no-calendar="true" value="09:01:30 PM">

Date Limits - minDate and maxDate

The example below conveniently uses data-attributes for setting minDate and maxDate options.

<input class="form-control" data-min-date="today"><input class="form-control" data-min-date="2016-09-20"><input class="form-control" data-min-date="September 2, 2015"><input class="form-control" data-min-date="today" data-max-date="2016-8-20">

Human-friendly Date Output

altInput can be used for displaying a friendly date format (per altFormat) to the user while sending the date formatted as dateFormatto the server. Feel free to inspect the input element below after picking a date to see what's going on.

<input class="form-control" data-alt-input="true" data-alt-format="F j, Y">

Preload Date and Time

You may load the calendar with a predefined value, ranging from simple dates, such as "2016-04-10" to full-fledged datetime strings. To keep the dates in UTC/GMT, see the UTC option.

<input class="form-control" data-enable-time="true" value="Sun, 24 Jul 2016 05:16:47 GMT">

<input class="form-control" data-enable-time="true" data-default-date="2016-12-27T16:16:22.585Z">

Custom elements and input groups

Flatpickrcan parse an input group of textboxes and buttons, common in Bootstrapand other frameworks. This permits additional markup, as well as custom elements to trigger the state of the calendar. Mark your input element with data-input(mandatory), and any additional buttons with data-toggle, data-open, data-close, or data-clear.

Disabling dates

Disable a date interval, or a specific date.

$("#disable-range").flatpickr({  disable: [              {                       from: "2016-08-16",                     to: "2016-08-19"                },              "2016-08-24",           new Date().fp_incr(30) // 30 days from now      ]});

Allowing manual input

You may let your users input dates themselves simply by toggling the allowInputoption

<input class="form-control" data-enable-time="true" data-allow-input="true">

Display week numbers

<input class="form-control" data-week-numbers=true placeholder="Enabled week numbers">

Inline or embedded calendar

<input class="form-control" data-inline="true" placeholder="Pick a date below">