Question

我正在使用2个flatpickr日历实例来显示start和end时间间隔。当用户更改start时间时，我还会在minDate时间中更新end值，并且类似地，在end时间中的任何更新中，我都会更新maxDate值start时间中的时间。我的代码如下所示：

onPageLand() {
    var startTimeConfig = {
        datetime: {
            enableTime: true,
            maxDate: new Date(<<--initial end time-->>),
            dateFormat: "Y-m-d H:i",
            defaultDate: new Date(<<--initial start time-->>),
            onClose: function (selectedDates, dateStr, instance) {
                let changedStartTime = new Date(dateStr);
                if (startTime.toString() != changedStartTime.toString()) {
                    startTime = changedStartTime;
                    //take update actions
                }

                endTimeConfig.datetime.minDate = changedStartTime;
                renderCalendar(startTimeConfig, endTimeConfig, calendarInstances);
            },
            onChange: function () {
            }
        }
    }


    var endTimeConfig = {
        datetime: {
            enableTime: true,
            minDate: new Date(<<--initial start time-->>),
            dateFormat: "Y-m-d H:i",
            defaultDate: new Date(<<--initial end time-->>),
            onClose: function (selectedDates, dateStr, instance) {
                let changedEndTime = new Date(dateStr);
                if (endTime.toString() != changedEndTime.toString()) {
                    endTime = changedEndTime;
                    //take update actions
                }

                startTimeConfig.datetime.maxDate = changedEndTime;
                renderCalendar(startTimeConfig, endTimeConfig, calendarInstances);
            },
            onChange: function() {
            }
        }
    }
    renderCalendar(startTimeConfig, endTimeConfig, calendarInstances);
}


function renderCalendar(startTimeConfig, endTimeConfig, calendarInstances) {
    var configs = [startTimeConfig, endTimeConfig];
    if (configs.length === calendarInstances.length) {
        for (var i = 0; i < calendarInstances.length; i++) {
            console.log(configs[i][calendarInstances[i].getAttribute("data-id")]);
            flatpickr(calendarInstances[i], configs[i][calendarInstances[i].getAttribute("data-id")] || {});
        }
    }
}

在上面的代码中，当我更改start或end日期中的值并关闭日历弹出窗口时，在控制台上出现以下错误：

未捕获的TypeError：无法读取未定义的属性“模式” 在S（calendar.js：630）在HTMLDocument。（calendar.js：489） S @ calendar.js：630 （匿名）@ calendar.js：489

如何解决以上问题？

PS：我的意图是

onClose中的火灾更新功能
保持minDate时间选择的end等于start时间选择，保持maxDate时间选择的start等于{{1} }始终选择时间。

Answer 1

当我尝试在close（）回调中销毁flatpickr实例时，这发生在我身上，并且似乎并没有对我造成任何伤害。但是，通常不必销毁flatpickr实例，尤其是如果您使用相同的选择器，因为它会自动销毁该选择器上的任何先前实例（至少根据文档）。

无法读取flatpickr.js中未定义错误的属性“模式”

1 个答案: