0

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

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日期并关闭日历弹出窗口时，我在控制台上收到以下错误：

未捕获的类型错误：无法在 HTMLDocument 的 S (calendar.js:630) 处读取未定义的属性“模式”。(calendar.js:489) S@calendar.js:630 (匿名)@calendar.js:489

如何解决上述问题？

PS：我的目的是

  1. 火灾更新功能onClose
  2. 始终保持minDate时间end选择等于start时间选择和maxDate时间start选择等于end时间选择。
4

1 回答 1

-1

当我试图在 close() 回调中销毁 flatpickr 实例时，这发生在我身上，在我的情况下，它似乎并没有真正造成任何伤害。但是，通常没有必要销毁 flatpickr 实例，特别是如果您使用相同的选择器，因为它会自动销毁该选择器上的任何先前实例（至少根据文档）。

于 2019-01-02T14:24:30.027 回答