flatpickr

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 withdata-input(mandatory), and any additional buttons withdata-toggle,data-open,data-close, ordata-clear.

<p class="flatpickr" data-wrap="true" data-click-opens="false">
	<input placeholder="Pick date" data-input>

	<a class="input-button" data-toggle><i class="icon-calendar"></i></a>
	<a class="input-button" data-clear><i class="icon-close"></i></a>
</p>

Disabling dates

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

document.getElementById("#disableOddDays").flatpickr({
	disable: [
		function(date){ // disable odd days
			return date.getDate()%2 > 0;
		}
	]
});

Enabling dates

Use the enable[] option to disable all dates except the ones you specify.

document.getElementById("#enableNextSeven").flatpickr({
	enable: [
		{
			from: "today",
			to: new Date().fp_incr(7) // 7 days from now
		}
	]
});

document.getElementById("#enableCustom").flatpickr({
	enable: [
		function(dateObj){
			// dateObj is a JavaScript Date
			return dateObj.getDay() %6 !== 0 && dateObj.getFullYear() === 2016;
		}
	]
});

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 type='text' class='flatpickr' data-utc=true data-default-date="Wed, 21 Sep 2016 18:33:47 GMT" data-enable-time=true>

<input type='text' class='flatpickr' data-default-date="2016-12-27T16:16:22.585Z" data-utc=true data-enable-time=true>

Events

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

onDayCreate()

Take full control of every date cell with theonDayCreate()hook.

flatpickr("#dayCreate", {
	onDayCreate: function(dObj, dStr, fp, dayElem){
		// utilize fp.currentYear, fp.currentMonth, dayElem.textContent
		if (Math.random() < 0.15)
			dayElem.innerHTML += "<span class='event'></span>";

		else if (Math.random() > 0.85)
			dayElem.innerHTML += "<span class='event busy'></span>";
	}
});

Fiscal Calendar

You may override thegetWeek()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 thegetWeek()function to display the fiscal term instead of the usual week numbers.

<input type='text' 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
});