flatpickr
A lightweight & powerful datetime picker that will walk your dog on a chilly february morning while you listen to an Al Green vinyl
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>