Flatpicker
Overview Official Website
flatpickr is a lightweight and powerful datetime picker.
Usage
Flatpickr's CSS and Javascript files are
bundled in the
vender.min.css and
vendor.js and globally
included in all pages.
Basic#
<input type="text" id="basic-datepicker" class="form-control" placeholder="Basic datepicker">
document.getElementById('basic-datepicker').flatpickr();
DateTime#
<input type="text" id="datetime-datepicker" class="form-control" placeholder="Date and Time">
document.getElementById('datetime-datepicker').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i"
});
Human-friendly Dates#
<input type="text" id="humanfd-datepicker" class="form-control" placeholder="October 9, 2018">
document.getElementById('humanfd-datepicker').flatpickr({
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
});
MinDate and MaxDate#
<input type="text" id="minmax-datepicker" class="form-control" placeholder="mindate - maxdate">
document.getElementById('minmax-datepicker').flatpickr({
minDate: "2020-01",
maxDate: "2020-03"
});
Disabling dates#
<input type="text" id="disable-datepicker" class="form-control" placeholder="disable datepicker">
document.getElementById('disable-datepicker').flatpickr({
onReady: function () {
this.jumpToDate("2025-01")
},
disable: ["2025-01-10", "2025-01-21", "2025-01-30", new Date(2025, 4, 9) ],
dateFormat: "Y-m-d",
});
Selecting multiple dates#
<input type="text" id="multiple-datepicker" class="form-control" placeholder="Multiple dates">
document.getElementById('multiple-datepicker').flatpickr({
mode: "multiple",
dateFormat: "Y-m-d"
});
Selecting multiple dates - Conjunction#
<input type="text" id="conjunction-datepicker" class="form-control" placeholder="2018-10-10 :: 2018-10-11">
document.getElementById('conjunction-datepicker').flatpickr({
mode: "multiple",
dateFormat: "Y-m-d",
conjunction: " :: "
});
Range Calendar#
<input type="text" id="range-datepicker" class="form-control" placeholder="2018-10-03 to 2018-10-10">
document.getElementById('range-datepicker').flatpickr({
mode: "range"
});
Inline Calendar#
<input type="text" id="inline-datepicker" class="form-control" placeholder="Inline calendar">
document.getElementById('inline-datepicker').flatpickr({
inline: true
});
Basic Timepicker#
<input type="text" id="basic-timepicker" class="form-control" placeholder="Basic timepicker">
document.getElementById('basic-timepicker').flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i"
});
24-hour Time Picker#
<input type="text" id="24hours-timepicker" class="form-control" placeholder="16:21">
document.getElementById('24hours-timepicker').flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true
});
Time Picker w/ Limits#
<input type="text" id="minmax-timepicker" class="form-control" placeholder="Limits">
document.getElementById('minmax-timepicker').flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
minDate: "16:00",
maxDate: "22:30",
});
Preloading Time#
<input type="text" id="preloading-timepicker" class="form-control" placeholder="Pick a time">
document.getElementById('preloading-timepicker').flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
defaultDate: "01:45"
});