Meet Flatpickr

The last datetime picker you'll ever need.

Basic

<input class="flatpickr" type="text" placeholder="Select Date..">

flatpickr(".flatpickr");

Make it a datetime picker

flatpickr(".flatpickr", {
    enableTime: true
});

Display a human-readable date

flatpickr(".flatpickr", {
    enableTime: true,

    // create an extra input solely for display purposes
    altInput: true,
    altFormat: "F j, Y h:i K"
});

Limit the range of available dates with minDateand maxDate

minDate and maxDate accept Date objects, date strings, timestamps, and the shortcut "today"

flatpickr(".flatpickr", {
    minDate: new Date(), // "today" / "2016-12-20" / 1477673788975
    maxDate: "2016-12-20",
    enableTime: true,

    // create an extra input solely for display purposes
    altInput: true,
    altFormat: "F j, Y h:i K"
});

Preloading Dates

Flatpickr can work with existing date strings, or date objects.

Input values get parsed automatically.

<input type="text", value="2016-10-20">

To preload a Date object, timestamp, or otherwise supply a date string, use thedefaultDate option.

flatpickr("#example-defaultDate", {
    defaultDate: 1477697199863, // Date objects and date strings are also accepted
    enableTime: true
});

UTC mode

By default, all dates in javascript are converted to a local time. However, you can choose to leave the dates in UTC. flatpickr can convert any given dates to UTC and select a datetime in UTC with a simple switch.

flatpickr("#utc", {
    utc: true,
    defaultDate: "2016-12-27T16:16:22.585Z",
    enableTime: true,
});

Custom elements and input groups

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.

Mark your input element withdata-input(mandatory), and any additional buttons withdata-toggle,data-open,data-close, ordata-clear.

<p class="flatpickr">
    <input placeholder="Pick date" data-input>

    <a class="input-button" data-toggle><i class="icon-calendar"></i></a>
    <a class="input-button" data-clear><i class="icon-close"></i></a>
</p>

flatpickr(".flatpickr", {
    wrap: true,
    clickOpens: false // disable opening calendar by clicking on input
});

Disabling dates

Disable a date interval, or a specific date.

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

Boolean functions are also supported. This allows fine-grained control over every single date, flexible enough for any use-case.

document.getElementById("#disableOddDays").flatpickr({
    disable: [
        function(date){ // disable odd days
            return date.getDate()%2 > 0;
        }
    ]
});

Inline Calendar

flatpickr("#inline", {
    inline: true, // show the calendar inline
    weekNumbers: true // show week numbers
})

Fiscal Calendar

You may override thegetWeek()function, used for calculating a week number, for various purposes. A fiscal year is used for calculating yearly financial statements. In this example, we will use override thegetWeek()function to display the fiscal term instead of the usual week numbers.

<input type='text' id="fiscal" placeholder="Fiscal Calendar">

document.getElementById("fiscal").flatpickr({
    weekNumbers: true,
    getWeek: function(givenDate){
        var checkDate = new Date(givenDate.getTime());
        checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
        var time = checkDate.getTime();
        checkDate.setMonth(7);
        checkDate.setDate(28);

        var week = (Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 2);
        if (week < 1) {
            week = 52 + week;
        }

        return 'FW' + ("0" + week).slice(-2);
    }
});

Events

Flatpickr has 5 event hooks for the most common and useful actions. For each hook, you may specify a single function, or an array of functions. Callback arguments are explained below.

selectedDates is an array of Date objects selected by the user. When there are no dates selected, the array is empty.

dateStr is a string representation of the latest selected Date object by the user. The string is formatted as per thedateFormatoption.

instance is the Flatpickr object, containing various methods and properties.

Hooks

onChange

onChange gets triggered when the user selects a date, or changes the time on a selected date.

onOpen

onOpen gets triggered when the calendar is opened.

onClose

onClose gets triggered when the calendar is closed.

document.getElementById("events-api-example").flatpickr({
    onChange: function(selectedDates, dateStr, instance) {
        ...
    },
    onOpen: function(selectedDates, dateStr, instance){
        ...
    },
    onClose: function(selectedDates, dateStr, instance){
        ...
    }
});

onReady

onReady gets triggered once the calendar is in a ready state.

onValueUpdate

onValueUpdate gets triggered when the input value is updated with a new date string.

onDayCreate()

Take full control of every date cell with theonDayCreate()hook.

flatpickr("#dayCreate", {
    onDayCreate: function(dObj, dStr, fp, dayElem){
        // utilize fp.currentYear, fp.currentMonth, dayElem.textContent
        if (Math.random() < 0.15)
            dayElem.innerHTML += "<span class='event'></span>";

        else if (Math.random() > 0.85)
            dayElem.innerHTML += "<span class='event busy'></span>";
    }
});

changeMonth(monthNum, is_offset = true)

Changes the current month.

let calendar = new Flatpickr(yourElement, config);
calendar.changeMonth(1); // go a month ahead
calendar.changeMonth(-2); // go two months back

calendar.changeMonth(0, false); // go to January

clear()

Resets the selected dates (if any) and clears the input.

close()

Closes the calendar.

destroy()

Destroys the Flatpickr instance, cleans up - removes event listeners, restores inputs, etc.

formatDate(formatStr, dateObj)

formatStr  is a string consisting of formatting tokens, and dateObj  is a Date.

Return Value

A string representation ofdateObj,  formatted as per formatStr

jumpToDate(date)

Sets the calendar view to the year and month ofdate, which can be a date string, a Date, or nothing.

Ifdateis undefined, the view is set to the latest selected date, the minDate, or today's date

open()

Shows/opens the calendar.

parseDate(date)

Parses a date string or a timestamp, and returns a Date.

redraw()

Redraws the calendar. Shouldn't be necessary in most cases.

set(option, value)

Sets a config option optionto value, redrawing the calendar and updating the current view, if necessary.

setDate(date)

Sets the current selected date(s) todate, which can be a date string, a Date, or anArray of the aforementioned

toggle()

Shows/opens the calendar if its closed, hides/closes it otherwise

Options

Protip:all of the string/boolean config options can also be supplied using data attributes, e.g. data-min-date, data-default-date, data-date-format etc.

Date Format Characters

Time Format Characters

Escaping date format characters

To escape a character (if you need to use one of the reserved format characters above) use a double backslash:\\

Example:

\\D\\a\\y \\p\\i\\c\\k\\e\\d: Y/m/d

To get something like:

Day picked: 2013/02/12

If you do not escape the characters you would end up with something like this instead:

Tuea13 picke12: 2013/02/12

Which is probably not what you want...

Note: It's recommended that you escape all characters that you don't want accidentally converted to format characters in the future as others are added.