A lightweight & powerful datetimepicker
A basic datepicker
Using dateFormat
<input class=flatpickr data-date-format="d-m-Y"> <input class=flatpickr data-date-format="m/d/Y"> <input class=flatpickr data-date-format="l, F j, Y">
<input class=flatpickr data-enable-time=true>
<input class=flatpickr data-enable-time=true data-time_24hr=true>
<input class=flatpickr data-enable-time=true data-enable-seconds=true >
<input class=flatpickr data-enable-time=true data-no-calendar=true value="09:00">
<input class=flatpickr data-min-date=today> <input class=flatpickr data-min-date="2016-09-20"> <input class=flatpickr data-min-date="September 2, 2015"> <input class=flatpickr data-min-date=today data-max-date='2016-8-20'>
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-alt-input=true data-alt-format="F j, Y">
Selected date: nothing yet
You may load the calendar with a predefined value, ranging from simple dates, such as "2016-04-10" to full-fledged datetime strings. To keep the dates in UTC/GMT, see the UTC option.
<input type=text class=flatpickr data-enable-time=true value="Sun, 24 Jul 2016 05:16:47 GMT">
<input class=flatpickr data-default-date="2016-12-27T16:16:22.585Z" data-enable-time=true>
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" data-wrap="true" data-click-opens="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>
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
]
});
Or pass in a custom function and disable dates using any logic you want.
document.getElementById("#disableOddDays").flatpickr({
disable: [
function(date){ // disable odd days
return date.getDate()%2 > 0;
}
]
});
Disable all dates except the ones you need, by passing in date strings, Date objects, or functions.
document.getElementById("#enableNextSeven").flatpickr({
enable: [
{
from: "today",
to: new Date().fp_incr(7) // 7 days from now
}
]
});
Use custom logic to enable the dates you need. For instance, enable business days of 2016:
document.getElementById("#enableCustom").flatpickr({
enable: [
function(dateObj){
return dateObj.getDay() %6 !== 0 && dateObj.getFullYear() === 2016;
}
]
});
You may let your users input dates themselves simply by toggling the allowInput option
<input type=text class=flatpickr data-enable-time=true data-allow-input=true">
By default, JavaScript's Date converts all dates to a local time. However, locale-agnostic databases often store dates in UTC. flatpickr can convert any given dates to UTC and select a datetime in UTC with a simple switch. Here are the previous examples with UTC mode enabled.
<input class=flatpickr data-utc=true data-default-date="2016-03-01 03:30:00 -0300" data-enable-time=true>
<input class=flatpickr data-default-date="2016-12-27T16:16:22.585Z" data-utc=true data-enable-time=true>
document.getElementById("events-api-example").flatpickr({
minDate: "today",
enableTime: true,
onChange: function(dateObj, dateStr, instance) {
...
},
onOpen: function(dateObj, dateStr, instance){
...
},
onClose: function(dateObj, dateStr, instance){
...
}
});
var check_in = document.getElementById("check_in_date").flatpickr({
altInput: true,
altFormat: "\\C\\h\\e\\c\\k \\i\\n\\: l, F j Y",
minDate: new Date()
});
var check_out = document.getElementById("check_out_date").flatpickr({
altInput: true,
altFormat: "\\C\\h\\e\\c\\k \\o\\u\\t: l, F j Y",
minDate: new Date()
});
check_in.config.onChange = dateObj => check_out.set("minDate", dateObj.fp_incr(1));
check_out.config.onChange = dateObj => check_in.set("maxDate", dateObj.fp_incr(-1));
<input class=flatpickr data-week-numbers=true placeholder="Enabled week numbers">
You may override the getWeek() 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 the getWeek() function to display the fiscal term instead of the usual week numbers.
<input id="fiscal" placeholder="Fiscal Calendar">
Flatpickr.prototype.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'+week;
}
document.getElementById("fiscal").flatpickr({
weekNumbers: true
});
<input class=flatpickr data-inline=true placeholder="Pick a date below">
// use your own arrow icons Flatpickr.defaultConfig.prevArrow = "<i class='icon i-angle-left'></i>"; Flatpickr.defaultConfig.nextArrow = "<i class='icon i-angle-right'></i>"; // change the first day of the week to Monday Flatpickr.l10n.firstDayOfWeek = 1; // then initialize your calendars ....
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.
| Config Option | Type | Default | Description |
|---|---|---|---|
| altFormat | string | "F j, Y" | Exactly the same as date format, but for the altInput field |
| altInput | Boolean | false | Show the user a readable date (as per altFormat), but return something totally different to the server. |
| altInputClass | String | "" | This class will be added to the input element created by the altInput option. Helpful if input elements are styled using classes. Bootstrap users will want to specify form-control here. |
| allowInput | boolean | false | Allows the user to enter a date directly input the input field. By default, direct entry is disabled. |
| clickOpens | boolean | true | Clicking on the input opens the date (time) picker. Disable this if you wish to open the calendar manually with .open() |
| dateFormat | string | "Y-m-d" | A string of characters which are used to define how the date will be displayed in the input box. The supported characters are defined in the table below. |
| defaultDate | String/Date Object | null | Set the initial selected date. Same as preloading a date string into an input's value attribute, but can also handle a Date object. |
| disable | array | [] | Dates to disable, using intervals |
| enableTime | boolean | false | Enables time picker |
| enableSeconds | boolean | false | Enables seconds in the time picker. |
| noCalendar | boolean | false | Hides the calendar. For use along with enableTime. |
| hourIncrement | integer | 1 | Adjusts the step for the hour input (incl. scrolling) |
| minuteIncrement | integer | 5 | Adjusts the step for the minute input (incl. scrolling) |
| inline | boolean | false | Displays the calendar inline. See Inline or embedded calendar. |
| static | boolean | false | Position the calendar inside the wrapper and next to the input element. (Leave false unless you know what you're doing. |
| wrap | Boolean | false | The wrapping element. See Custom elements and input groups. |
| maxDate | String | null | The maximum date that a user can pick to, as a string. See Date.parse() |
| minDate | String | null | The minimum date that a user can start picking from, as a string. See Date.parse() |
| onChange | function(dateObject, dateString) | null | A function that gets triggered on every date selection |
| onOpen | function(dateObject, dateString) | null | A function that gets triggered on every time the calendar is opened. |
| onClose | function(dateObject, dateString) | null | A function that gets triggered on every time the calendar is closed. |
| parseDate | function | false | A function that expects a date string and must return a Date object |
| shorthandCurrentMonth | boolean | false | Show the month using the shorthand version (ie, Sep instead of September). |
| weekNumbers | boolean | false | Enables display of week numbers in calendar. |
| time_24hr | boolean | false | Displays time picker in 24 hour mode without AM/PM selection when enabled. |
| utc | boolean | false | When true, dates will parsed, formatted, and displayed in UTC. It's recommended that date strings contain the timezone, but not necessary. |
| prevArrow | string | < |
Code for the previous icon. |
| nextArrow | string | > |
Code for the next icon. |
| 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 |
| l (lowercase 'L') | A full textual representation of the day of the week | Sunday through Saturday |
| j | Day of the month without leading zeros | 1 to 31 |
| J | Day of the month without leading zeros and ordinal suffix | 1st, 2nd, to 31st |
| 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 |
| n | Numeric representation of a month, without leading zeros | 1 through 12 |
| M | A short textual representation of a month | Jan through Dec |
| 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 |
| Character | Description | Example |
|---|---|---|
| H | Hours (24 hours) | 00 to 23 |
| h | Hours | 1 to 12 |
| i | Minutes | 00 to 59 |
| S | Seconds, 2 digits | 00 to 59 |
| s | Seconds | 0, 1 to 59 |
| K | AM/PM | AM or PM |
To escape a character (if you need to use one of the reserved format characters above) use a double backslash: \\
Example:
dateFormat: '\\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.
Flatpickr has been translated to over 25 languages.
Localization involves simply overriding objects below, contained in Flatpickr.l10n.
Locale:
| 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.l10n.weekdays.longhand = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
document.getElementById('yourId').flatpickr();
</script>