如何在enableTime为true时让flatpickr选中日期后自动关闭？

我正在使用flatpickr库，发现当设置enableTime: false时，选中日期后组件会自动关闭；但设置enableTime: true时，选中日期后不会自动关闭（应该是默认逻辑允许用户继续选择时间）。我想实现选中日期后立即关闭组件，尝试过手动调用close()方法但没效果，以下是我的配置代码：

var config = {
    locale: null,
    maxDate: "today",
    altInput: true,
    enableTime: true,
    minDate: document.getElementById("start_date_id").value,
    altFormat: "d-m-Y G:i K",
    dateFormat: "Z",
    from: null,
    to: null,
    wrap: true,
};
let start_flatpickr = flatpickr(document.getElementById("div_end_date_id"), config);
start_flatpickr.close();

解决方法 #

你直接在初始化后调用close()无效，是因为此时组件还没触发日期选择的事件，正确的做法是利用flatpickr的onChange回调事件，在用户选中日期（或时间）时触发关闭操作。

修改你的配置，添加onChange属性，在回调里调用实例的close()方法即可：

var config = {
    locale: null,
    maxDate: "today",
    altInput: true,
    enableTime: true,
    minDate: document.getElementById("start_date_id").value,
    altFormat: "d-m-Y G:i K",
    dateFormat: "Z",
    from: null,
    to: null,
    wrap: true,
    // 添加onChange回调
    onChange: function(selectedDates, dateStr, instance) {
        // 只要有选中值就关闭组件
        if (selectedDates.length > 0) {
            instance.close();
        }
    }
};
let start_flatpickr = flatpickr(document.getElementById("div_end_date_id"), config);

这个回调会在用户选择日期/时间时触发，此时调用instance.close()就能强制关闭组件，无论是否还需要选择时间。

内容的提问来源于stack exchange，提问作者Hemant Sah