CODEWITHSUNDEEP
flatpickr
Vladimír Mlázovský
Vladimír Mlázovský

Reputation: 311

Set flatpickr datetime on last enabled day does not work

I have flatpickr date picker on my webpages. Users can select date and time from range from minDate to maxDate. On create form component I also want to set last value, which user select - selectedDate.

If the selectedDate is from last day, flatpicker ignores it.

My code:

const options: Partial<BaseOptions> = {
    minDate: minDate, // "2020-12-05 00:00"
    maxDate: maxDate, // "2020-12-24 23:59"
    dateFormat: 'Y-m-d H:i',
    defaultDate: selectedDate, // "2020-12-24 17:00"
    enableTime: true,
};

const picker = <flatpickr.Instance> flatpickr(inputElement, options);
picker.setDate(selectedDate);

Upvotes: 1

Views: 2500

Answers (1)

Vladim&#237;r Ml&#225;zovsk&#253;
Vladim&#237;r Ml&#225;zovsk&#253;

Reputation: 311

After some debugging I found a problem. Flatpicker sets internal maxDate to last midnight 2020-12-24 23:59 => 2020-12-24 00:00 and inside setDate() ignores the selectedDate 2020-12-24 17:00, which is not between minDate maxDate.

I fix that by adding this line of code just before picker.setDate(selectedDate);

// ... init the picker ...
picker.set('maxDate', maxDate);
// ... setDate() ...

This sets internal maxDate to desired datetime and make your selectedDate work well.

Upvotes: 1

Related Questions