flatpickr

A lightweight, dependency-free datepicker that doesn't suck

Getting Started Download

First off, load the necessary files (just two). 

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

<script src="/path/to/flatpickr.js"></script>

The Syntax

flatpickr('selector', options);

Examples

A basic datepicker 
flatpickr('#flatpickr')

Custom formatting with dateFormat 
flatpickr('#dateFormat', { dateFormat: 'd-m-Y'});

Using minDate and maxDate options 
flatpickr('#minDate', {
    // today
    minDate: new Date()

    // can also use a string date, e.g. yyyy-mm-dd
    minDate: "2018-09-20"
    // or even
    minDate: new Date("September 2, 2018"),

    maxDate: "2018-09-20"


});

Disabling date intervals with disable 
flatpickr('#disableRange', {

    disable: [ { 'from' : "2016-07-06", 'to' : "2016-07-09" } ],
    minDate: new Date()

});

flatpickr('#disableRangeMultiple', {

    disable:
    [
        { 'from' : "2016-09-06", 'to' : "2016-09-09" },
        { 'from' : "August 25, 2016", 'to' : "August 31, 2016" }
    ],
    minDate: new Date(),
    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.element.addEventListener("change", function(){
    check_out.set( "minDate" , check_in.element.value );
});

check_out.element.addEventListener("change", function(){
    check_in.set( "maxDate" , check_out.element.value );
});

Custom default date

flatpickr("#defDate", {'defaultDate': '2015-10-10'});


Using data-defaultDate attribute and custom dateFormat inline 
<input class=flatpickr
data-defaultDate="2016/1/17"
data-dateFormat="F d, \\b\\r\\u\\h"
value="January 17, bruh">

flatpickr(".flatpickr");

Inline or embedded calendar

<div class=inline_picker></div>
<input id=inline_picked_date type=hidden>

flatpickr(".inline_picker", { 'inline' : true, 'altInput' : "#inline_picked_date"});


Alternative: 
<input id=inline_picked_date2>
<div class=flatpickr data-inline='true' data-altInput='#inline_picked_date2'></div>

flatpickr(".flatpickr");

Modifying default configuration for all calendars: 
// 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 config options except 'disable' can also be provided using data attributes, e.g. data-mindate, data-defaultdate etc.

Config Option Type Default Description
dateFormat string 'F j, Y' A string of characters which are used to define how the date will be displayed in the input box. Very similar to the PHP date function, but with less options. The supported characters are defined below.
defaultDate Date(), String Today Set the date to highlight on first opening if the associated input field is blank. Specify either an actual date via a Date object or as a string. See (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
minDate Date(), String null The minimum date that a user can start picking from, as a string or a JavaScript Date. See (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
maxDate Date(), String null The maximum date that a user can pick to, as a string or a JavaScript Date. See (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
disable array null Dates to disable, using intervals
altInput String null A reference to another input element. This can be useful if you want to show the user a readable date, but return something totally different to the server. Pass in a string selector such as "#yourID" or ".className"
altFormat string null Exactly the same as date format, but for the altInput field
inline Boolean / String false Display the calendar inline.
shorthandCurrentMonth boolean false Show the month using the shorthand version.


Date Format

Character Description Example
d Day of the month, 2 digits with leading zeros 01 to 31
D A textual representation of a day Mon through Sun
j Day of the month without leading zeros 1 to 31
l (lowercase 'L') A full textual representation of the day of the week Sunday through Saturday
w Numeric representation of the day of the week 0 (for Sunday) through 6 (for Saturday)
F A full textual representation of a month January through December
m Numeric representation of a month, with leading zero 01 through 12
M A short textual representation of a month Jan through Dec
n Numeric representation of a month, without leading zeros 1 through 12
U The number of seconds since the Unix Epoch 1413704993
y A two digit representation of a year 99 or 03
Y A full numeric representation of a year, 4 digits 1999 or 2003

Note: Suffixes have been removed because JavaScript's Date.parse didn't like them.



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).

Property Type Default Description
l10n.weekdays.shorthand array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] The shortened version of each weekday, starting with Sunday
l10n.weekdays.longhand array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] The long version of each weekday, starting with Sunday
l10n.months.shorthand array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Shortened version of each month, starting with January
l10n.months.longhand array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] Long version of each month, starting with January
l10n.daysInMonth array [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] How many days in each month, starting with January
l10n.firstDayOfWeek integer 0 Start the calendar on a different weekday (0 = Sunday, 1 = Monday, 2 = Tuesday, etc.)

Example: weekdays in French: 

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