CODEWITHSUNDEEP
flatpickr
Josh hall
Josh hall

Reputation: 27

Flatpickr - Is it possible to set time to 15 minute intervals

Searched for this everywhere and it isn't in the flatpickr options. I need a way so the user can only select a date in 15 minute intervals. For example: 12:00 12:15 12:30 12:45 .....

Any help would be great. Thanks

ref-https://flatpickr.js.org/

Upvotes: 2

Views: 6490

Answers (2)

lukep
lukep

Reputation: 131

The following code will ensure that when arbitrary time values are entered, the stepping is enforced. I daresay the code could be a little more concise but hopefully it's clear. The UX is a bit clunky but it works as expected.

    window.addEventListener('load', function () {
        flatpickr("#myPickerId", {
            enableTime: true, minuteIncrement: 15, onChange: function (dates, dateStr, instance) { flatPickerChange(dates, dateStr, instance); } });
    });

    function flatPickerChange(dates, dateStr, instance) {
        let mi = instance.config.minuteIncrement;
        if (mi && mi > 0) {
            let mins = Number(instance.minuteElement.value);
            if (mins === NaN) return; // Should never happen
            let rem = mins % mi; 
            if (rem === 0) return; // Do nothing if intended stepped value has been selected
            // See Anil Ram's answer https://stackoverflow.com/questions/4228356/how-to-perform-an-integer-division-and-separately-get-the-remainder-in-javascr
            let quot = mins / mi | 0;
            if (rem / mi > 0.5) quot++; // Round up to nearest step if the entered value is closer to upper step rather than lower step
            instance.minuteElement.value = quot * mi;
            instance.setDate(instance.parseDate(dateStr).setMinutes(instance.minuteElement.value)); // Need to explicitly set the date
        }
    }

Upvotes: 1

whitefang
whitefang

Reputation: 1081

Yes it is possible. flatpickr minuteIncrement option can be used to set increment intervals. Also, input time can be restricted between two values as given the example Time Picker w/ Limits.

Upvotes: 6

Related Questions