Flatpickr
Basic
Basic date picker using
flatpickr(input)
with default settings.
flatpickr("input[name=basic]");
Date & Time
Date and Time picker with
enableTime: true
.
flatpickr("input[name=datetime]", {
enableTime: true,
dateFormat: "Y-m-d H:i"
});
Human-friendly Format
Displays a user-friendly date format while submitting a standard database format.
flatpickr("input[name=human]", {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d"
});
Range Selector
Select a range of dates using
mode: "range"
.
flatpickr("input[name=range]", {
mode: "range"
});
Inline Calendar
Render the calendar directly on the page instead of an input popover using
inline: true
.
flatpickr("#inline-calendar", {
inline: true
});