Flatpickr

A lightweight and powerful datetime picker.

Basic Example

Without any configurations.

Javascript Code for this Element

flatpickr("#elementId", {
//no configurations
});

HTML Code for this Element

<input class="form-control flatpickr flatpickr-input my-3" type="text" id="basic" placeholder="Basic Date Picker">

Human-friendly dates

You can use the dateFormat option to format the date displayed in the input.

Javascript Code for this Element

flatpickr("#humane", {
	altInput: true,
	altFormat: "F j, Y",
	dateFormat: "Y-m-d",
});

HTML Code for this Element

<div class="nouislider-container">
	<div id="arbitrary-values-slider" class="m-4"></div>
</div>

Min Max Date

Set the earliest Date and furthest date possible to fit your criteria.

Javascript Code for this Element

flatpickr("#minMax", {
	minDate: "today",
	maxDate: new Date().fp_incr(14) //14 days from
})

HTML Code for this Element

<input class="form-control flatpickr flatpickr-input my-3" type="text" placeholder="Mix Max Date" id="minMax">

Disabling Dates

Disable a specific date or a date range depending on your configurations.

Javascript Code for this Element

flatpickr("#disabledDates", {
	"disable": [
	function(date) {
		// return true to disable
		return (date.getDay() === 0 || date.getDay() === 6);

	}
],
"locale": {
	"firstDayOfWeek": 1 // start week on Monday
}
});

HTML Code for this Element

<input class="form-control flatpickr flatpickr-input my-3" type="text" id="basic" placeholder="Basic Date Picker">

Range Calendar

Select a range of dates using the range calendar.

Javascript Code for this Element

flatpickr('#range', {
	mode: "range",
	minDate: "today",
	dateFormat: "Y-m-d",
});

HTML Code for this Element

<input class="form-control flatpickr flatpickr-input my-3" type="text" placeholder="Range Picker" id="range">

DateTime

Select Date and Time with the same input element

Javascript Code for this Element

flatpickr('#dateTime', {
	enableTime: true,
	dateFormat: "Y-m-d H:i",
});

HTML Code for this Element

<input class="form-control flatpickr flatpickr-input my-3" type="text" placeholder="Date Time Picker" id="dateTime">