Examples#

Unless otherwise specified, the markup for examples below consists of just an input element, and flatpickr invocation with a given config.

Basic#

flatpickr without any config.

DateTime#

{
    enableTime: true,
    dateFormat: "Y-m-d H:i",
}

Human-friendly Dates#

altInput hides your original input and creates a new one.

Upon date selection, the original input will contain a Y-m-d... string, while the altInput will display the date in a more legible, customizable format.

Enabling this option is highly recommended.

{
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
}

After selecting a date, inspect this input to see how it works.

Supplying Dates for flatpickr#

flatpickr has numerous options that accept date values in a variety of formats. Those are:

defaultDate
minDate
maxDate
enable/disable

The values accepted by these options all follow the same guidelines.

You may specify those dates in a variety of formats:

Date Objects are always accepted
- new Date(2015, 0, 10)
Timestamps are always accepted
- e.g. 1488136398547
ISO Date Strings are always accepted
- e.g. "2017-02-26T19:40:03.243Z"
Date Strings, which must match the dateFormat chronologically
- dateFormat defaults to YYYY-MM-DD HH:MM
- This means that "2016" "2016-10", "2016-10-20", "2016-10-20 15", "2016-10-20 15:30" are all valid date strings
The shortcut "today"

Preloading a Date#

The selected date will get parsed from the input’s value or the defaultDate option.

See supplying dates for valid date examples.

minDate and maxDate#

minDate option specifies the minimum/earliest date (inclusively) allowed for selection.

maxDate option specifies the maximum/latest date (inclusively) allowed for selection.

{
    minDate: "2020-01"
}

{
    dateFormat: "d.m.Y",
    maxDate: "15.12.2017"
}

{
    minDate: "today"
}

{
    minDate: "today",
    maxDate: new Date().fp_incr(14) // 14 days from now
}

Disabling dates#

If you’d like to make certain dates unavailable for selection, there are multiple methods of doing so.

Disabling specific date
Disabling a date range
Disabling dates using a function

All of those are possible with the disable option.

Disabling specific dates#

{
    disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ],
    dateFormat: "Y-m-d",
}

Disabling range(s) of dates:#

{
    dateFormat: "Y-m-d",
    disable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ]
}

Disabling dates by a function:#

The function takes in a Date object, and should return a boolean value.
If the function returns true, the date will be disabled.

This flexibility allows us to use any arbitrary logic to disable dates.
The example below disables Saturdays and Sundays.

{
    "disable": [
        function(date) {
            // return true to disable
            return (date.getDay() === 0 || date.getDay() === 6);

        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // start week on Monday
    }
}

Disabling all dates except select few#

This is the enable option, which takes in an array of date strings, date ranges and functions. Essentially the same as the disable option above, but reversed.

Enabling specific dates#

{
    enable: ["2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9) ]
}

Enabling range(s) of dates:#

{
    enable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ]
}

Enabling dates by a function:#

{
    enable: [
        function(date) {
            // return true to enable

            return (date.getMonth() % 2 === 0 && date.getDate() < 15);

        }
    ]
}

Selecting multiple dates#

It is possible to select multiple dates.

{
    mode: "multiple",
    dateFormat: "Y-m-d"
}

Preloading multiple dates#

{
    mode: "multiple",
    dateFormat: "Y-m-d",
    defaultDate: ["2016-10-20", "2016-11-04"]
}

Customizing the Conjunction#

{
    mode: "multiple",
    dateFormat: "Y-m-d",
    conjunction: " :: "
}

Range Calendar#

Select a range of dates using the range calendar.

{
    mode: "range"
}

Note that disabled dates (by either minDate, maxDate, enable or disable) will not be allowed in selections.

{
    mode: "range",
    minDate: "today",
    dateFormat: "Y-m-d",
    disable: [
        function(date) {
            // disable every multiple of 8
            return !(date.getDate() % 8);
        }
    ]
}

Preloading range dates#

{
    mode: "range",
    dateFormat: "Y-m-d",
    defaultDate: ["2016-10-10", "2016-10-20"]
}

Time Picker#

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
}

24-hour Time Picker#

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    time_24hr: true
}

Time Picker w/ Limits#

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    minTime: "16:00",
    maxTime: "22:30",
}

Preloading Time#

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    defaultDate: "13:45"
}

DateTimePicker with Limited Time Range#

{
    enableTime: true,
    minTime: "09:00"
}

{
    enableTime: true,
    minTime: "16:00",
    maxTime: "22:00"
}

Inline Calendar#

Display the calendar in an always-open state with the inline option.

{
    inline: true
}

SunMonTueWedThuFriSat

123456789101112131415161718192021222324252627282930123456789101112

Display Week Numbers#

Enable the weekNumbers option to display the week number in a column left to the calendar.

{
    weekNumbers: true,
    /*
        optionally, you may override the function that
        extracts the week numbers from a Date by
        supplying a getWeek function. It takes in a date
        as a parameter and should return a corresponding string
        that you want to appear left of every week.
    */
    getWeek: function(dateObj) {
        // ...
    }
}

flatpickr + external elements#

flatpickr can parse an input group of textboxes and buttons, common in Bootstrap and other frameworks.

This permits additional markup, as well as custom elements to trigger the state of the calendar.

<div class="flatpickr">
    <input type="text" placeholder="Select Date.." data-input> <!-- input is mandatory -->

    <a class="input-button" title="toggle" data-toggle>
        <i class="icon-calendar"></i>
    </a>

    <a class="input-button" title="clear" data-clear>
        <i class="icon-close"></i>
    </a>
</div>

{
    wrap: true
}

Note that the selector for flatpickr should be the wrapping div with class flatpickr not the input tag.

Custom parsing and formating#

Customize date parsing and formating e.g. to support custom formatting tokens.

{
  altInput: true,
  dateFormat: "YYYY-MM-DD",
  altFormat: "DD-MM-YYYY",
  allowInput: true,
  parseDate: (datestr, format) => {
    return moment(datestr, format, true).toDate();
  },
  formatDate: (date, format, locale) => {
    // locale can also be used
    return moment(date).format(format);
  }
}