Flatpickr范围模式下onChange事件如何按选择顺序获取selectedDates

Flatpickr的range模式默认会自动对选中的日期按时间排序，想要保留用户的选择顺序，你需要手动维护一个独立数组来追踪选择顺序，而不是依赖内置的selectedDates参数。

以下是修改后的代码，实现按选择顺序存储日期，并基于此处理你的日期差逻辑：

// 维护一个数组，按用户选择顺序存储日期
let selectedOrder = [];

flatpickr(element, {
    mode: "range",
    dateFormat: "d-m",
    maxDate: "today",
    onChange: function(selectedDates, dateStr, instance) {
        switch(selectedDates.length) {
            case 1:
                // 第一次选择日期，重置数组并记录当前日期
                selectedOrder = [selectedDates[0]];
                break;
            case 2:
                // 第二次选择日期，找出新增的日期（对比已记录的第一个日期）
                const existingDate = selectedOrder[0];
                const newDate = selectedDates.find(date => date.getTime() !== existingDate.getTime());
                // 将新日期追加到数组末尾，保持选择顺序
                selectedOrder.push(newDate);

                // 基于选择顺序计算日期差
                const dateDiff = moment(selectedOrder[1]).diff(selectedOrder[0], 'days');
                // 判断日期间隔是否超过90天（绝对值）
                if (Math.abs(dateDiff) > 90) {
                    if (dateDiff > 0) {
                        // 顺序选择：先选开始，后选结束 → 将结束日期设为开始+90天
                        instance.setDate([selectedOrder[0], new Date(selectedOrder[0]).fp_incr(90)]);
                    } else {
                        // 逆序选择：先选结束，后选开始 → 将开始日期设为结束-90天
                        instance.setDate([new Date(selectedOrder[1]).fp_incr(-90), selectedOrder[1]]);
                    }
                    // 重置选择顺序数组，避免setDate触发的onChange干扰
                    selectedOrder = [];
                }
                break;
            default:
                // 选中状态被清空，重置数组
                selectedOrder = [];
        }
    }
});

关键逻辑说明： #

• selectedOrder数组专门用来记录用户的选择顺序，每次第一次选择时初始化，第二次选择时通过对比找出新增的日期并追加，确保顺序和用户操作一致。
• 计算日期差时使用selectedOrder数组，这样就能得到正负值，区分用户是“先选开始后选结束”还是“先选结束后选开始”。
• 当日期间隔超过90天时，根据日期差的正负分别处理两种选择顺序，调整对应的日期范围，同时重置selectedOrder避免后续回调逻辑出错。

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