flatpickr

A lightweight & powerful datetime picker that

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>

Usage

flatpickr('selector', [options]);

Examples

A basic datepicker 
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">

Custom formatting with dateFormat

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

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

Date Limits with minDate and maxDate

The example below conveniently uses data-attributes for setting minDate and maxDate options. 
<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'>

DateTime Picker

<input class=flatpickr data-enabletime=true>

Utilizing defaultDate, altInput

altInput can be used for displaying a friendly date format (see 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-defaultDate="2015/10/10 3:30 PM"
	data-enabletime=true
	data-timeFormat="h:i K">


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

Disabling date intervals with disable

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 ); });
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">

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

Config Option Type Default Description
enableTime boolean false Enables time picker
dateFormat string 'Y-m-d' 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.
timeFormat string 'H:i' A string of characters which are used to define how the time will be displayed in the input box.
defaultDate String null Set the date to highlight on first opening. Specify a date as a parsable string.
minDate String null The minimum date that a user can start picking from, as a string.
See Date.parse()
maxDate String null The maximum date that a user can pick to, as a string.
See Date.parse()
disable array null Dates to disable, using intervals
altInput Boolean false Show the user a readable date (as per altFormat), but return something totally different to the server.
altFormat string "F j, Y" Exactly the same as date format, but for the altInput field
inline Boolean false Display the calendar inline.
shorthandCurrentMonth boolean false Show the month using the shorthand version.
onChange function(dateObject) n/a A function that gets triggered on every date selection
hourIncrement integer 1 Adjusts the step for the hour input (incl. scrolling)
minuteIncrement integer 5 Adjusts the step for the minute input (incl. scrolling)

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

Time Format

Character Description Example
H Hours 00 to 23
h Hours 1 to 12
i Minutes 00 to 59
K AM/PM AM or PM

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>