Basic
Date time picker is powered by flatpickr.js that gives the ability to user to select date or time.
var f1 = flatpickr(document.getElementById('basicFlatpickr'));
Date Time
Use enableTime: true and dateFormat: "Y-m-d H:i" option to enable time support
var f2 = flatpickr(document.getElementById('dateTimeFlatpickr'), {
enableTime: true,
dateFormat: "Y-m-d H:i",
});
Range Calendar
Use mode: range select the date with range.
var f3 = flatpickr(document.getElementById('rangeCalendarFlatpickr'), {
mode: "range"
});
Preloading Time
Use noCalendar: true with Date Time options to disable calendar and show time picker only.
var f4 = flatpickr(document.getElementById('timeFlatpickr'), {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
defaultDate: "13:45"
});
Copyright © 2022 DesignReset, All rights reserved.
Coded with