flatpickr - 在最后启用的日期设置 flatpickr 日期时间不起作用

Question

我的网页上有 flatpickr 日期选择器。用户可以从 minDate 到 maxDate 的范围内选择日期和时间。在创建表单组件时，我还想设置用户选择的最后一个值 - selectedDate。

如果selectedDate是从最后一天开始的，flatpicker 会忽略它。

我的代码：

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);

标签： flatpickr

Answer 1

经过一番调试，我发现了一个问题。Flatpicker将内部 maxDate 设置为最后一个午夜2020-12-24 23:59 => 2020-12-24 00:00 并且内部setDate()忽略 selectedDate 2020-12-24 17:00，它不在 minDate maxDate 之间。

我通过在之前添加这行代码来解决这个问题picker.setDate(selectedDate);

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

这会将内部 maxDate 设置为所需的日期时间，并使您的 selectedDate 正常工作。