flatpickr

Install

Node Package Manager:
npm install flatpickr

Bower:
bower install flatpickr-calendar

Otherwise:
Download

Then require('flatpickr'), use wiredep, or otherwise load the necessary files.

<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css">
<script src="/path/to/flatpickr.js"></script>

Syntax

flatpickr('selector', [options]);

Basics

flatpickr('#flatpickr-tryme')

The selector can be a class as well, turning multiple inputs/fields into calendars.

flatpickr('.calendar')

<input class=calendar placeholder="calendar 1">
<input class=calendar placeholder="calendar 2">
<input class=calendar placeholder="calendar 3">

Date Formatting

Using dateFormat

flatpickr('#yourSelector', { dateFormat: 'd-m-Y'});
flatpickr('#yourSelector', { dateFormat: 'm/d/Y'});

<input class=flatpickr data-dateFormat="l, F j, Y">

Date Limits - minDate and maxDate

<input class=flatpickr data-mindate=today>
<input class=flatpickr data-mindate="2016-09-20">
<input class=flatpickr data-mindate="September 2, 2015">
<input class=flatpickr data-mindate=today data-maxdate='2016-8-20'>

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 with data-input (mandatory), and any additional buttons with data-toggle, data-open, data-close, or data-clear.

<p class="flatpickr input-group" data-wrap="true" data-clickOpens="false">

    <input placeholder="Pick date" data-input>

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

</p>

DateTime Picker

<input class=flatpickr data-enabletime=true>

DateTime Picker: 24 Hour Mode

<input class=flatpickr data-enabletime=true data-time_24hr=true data-timeFormat="H:i">

Time Picker

<input class=flatpickr data-enabletime=true  data-nocalendar=true>

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 dateFormat to the server. Feel free to inspect the input element below after picking a date to see what's going on.

<input class=flatpickr data-altinput=true data-altFormat="F j, Y">

Selected date: nothing yet

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.

<input class=flatpickr data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true">

Disable date intervals

With disable option

flatpickr('#disableRange', {

    disable: [ { 'from' : "2016-07-06", 'to' : "2016-07-09" } ],
    minDate: "today"

});

flatpickr('#disableRangeMultiple', {

    disable:
    [
        { 'from' : "2016-09-06", 'to' : "2016-09-09" },
        { 'from' : "August 25, 2016", 'to' : "August 31, 2016" }
    ],
    minDate: "today",
    dateFormat: 'Y-m-d'

});

Setting options on the fly

var check_in = flatpickr("#check_in_date", { minDate: new Date() });
var check_out = flatpickr("#check_out_date", { minDate: new Date() });

check_in.set("onChange", function(d) { 
    check_out.set("minDate", d.fp_incr(1)); //increment by one day
});
check_out.set("onChange", function(d) { 
    check_in.set("maxDate", d); 
});

Inline or embedded calendar

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

Customizing default options

// use your own arrow icons
flatpickr.init.prototype.defaultConfig.prevArrow = "<i class='icon i-angle-left'></i>";
flatpickr.init.prototype.defaultConfig.nextArrow = "<i class='icon i-angle-right'></i>";

// change the first day of the week to Monday
flatpickr.init.prototype.l10n.firstDayOfWeek = 1;

// then initialize your calendars
flatpickr(".flatpickr")
....

Options

Protip: all of the string/boolean config options can also be supplied using data attributes, e.g. data-mindate, data-defaultdate, data-dateformat 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:

dateFormat: '\\Da\\y picke\\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...

Localization

flatpickr supports localizing text in a similar way to modifying the methods (above).

Example: weekdays in French:

<script>
    flatpickr.init.prototype.l10n.weekdays.longhand = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
    flatpickr('#yourId');
</script>