使用easepick如何预选日期范围？文档就绪时如何预设指定日期区间？

如何预选日期范围？ #

Easepick 的 RangePlugin 支持两种方式设置预选日期范围：

• 初始化阶段，在 RangePlugin 的配置项中直接声明 start 和 end（需传入 Date 对象）
• 初始化完成后，调用实例方法 picker.setDate([起始日期, 结束日期]) 动态设置

把 date_logiciel 同时设为起止日期的实现 #

将传入的 date_logiciel（YYYY-MM-DD 格式字符串）转换为 Date 对象，同时作为起止日期配置到 RangePlugin 中即可。修改后的完整代码如下：

function initialDateRangePicker(date_logiciel) {
    // YYYY-MM-DD格式字符串可直接被Date构造函数解析为Date对象
    const presetDate = new Date(date_logiciel);
    
    const picker = new easepick.create({
        element: "#closingDate",
        css: [
            "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css"
        ],
        zIndex: 10,
        lang: "fr-FR",
        format: "DD/MM/YYYY",
        grid: 2,
        calendars: 2,
        plugins: [
            "RangePlugin",
            "KbdPlugin"
        ],
        RangePlugin: {
            delimiter: "  -  ",
            // 预选起止日期均设为presetDate
            start: presetDate,
            end: presetDate
        },
        setup(picker) {
            picker.on('select', (e) => {
                let debutObj = e.detail.start , finObj = e.detail.end;
                let debutStr = JSON.stringify(debutObj) , finStr = JSON.stringify(finObj);
                let debuts = debutStr.split("T") , fins = finStr.split("T");
                tableRemiseEnBanqueDatatables.getDatatable().destroy();
                tableRemiseEnBanqueDatatables.init(debuts[0], fins[0], JSON.parse('{ "id_liste": "#listeRemiseEnBanque", "icone": "/img/common/icones/bxs_bank.png", "titre": "Remise en banque" }'));
            });
        }
    });

    // 若需动态修改预选范围，可调用此方法替代配置项方式
    // picker.setDate([presetDate, presetDate]);

    return picker;
}

// DOM加载完成后初始化，确保目标元素已存在
document.addEventListener('DOMContentLoaded', function() {
    // 替换为实际的date_logiciel值
    const targetDate = "2024-05-20";
    initialDateRangePicker(targetDate);
});

关键注意事项 #

• 如果你的日期格式不是 YYYY-MM-DD，需要手动拆分年、月、日构造 Date 对象（注意月份参数是从0开始的，比如1月传0）。
• 必须在 DOM 完全加载后调用初始化函数，否则会因找不到 #closingDate 元素导致插件初始化失败。

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