Date Formatting

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">

DateTime Picker

<input class=flatpickr data-enable-time=true>

DateTime Picker: 24 Hour Mode

<input class=flatpickr data-enable-time=true data-time_24hr=true>

DateTime Picker with seconds

<input class=flatpickr data-enable-time=true data-enable-seconds=true >

Time Picker

<input class=flatpickr data-enable-time=true data-no-calendar=true value="09:00">

Date Limits - minDate and maxDate

The example below conveniently uses data-attributes for setting minDate and maxDate options.

<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'>

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-alt-input=true data-alt-format="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. 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>

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" 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>

Disabling dates

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

Allowing manual input

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">

UTC mode

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>

Event API

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){
		...
	}
});

---

Example: check in and check out

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

Display week numbers

<input class=flatpickr data-week-numbers=true placeholder="Enabled week numbers">

Fiscal Calendar

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

Inline or embedded calendar

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

Customizing default options

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