Basic Date Time Range Calendar Preloading Time

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