如何从Easepick中获取选中日期？按文档方法无法实现

你的问题出在事件触发时机不对——onClickCalendarDay是点击单个日期就触发，但在Range模式下，用户需要选完两个日期才算完成范围选择，这时候直接调用getEndDate()可能拿不到正确的值（比如第一次点击时还没有结束日期）。

另外，Easepick的RangePlugin有专门的事件和属性来获取选中的范围日期，调整代码如下：

方法1：使用picker的onChange事件 #

这个事件会在选中日期（包括范围）确定后触发，能确保拿到完整的选中日期：

var date = new Date();
date.setDate(date.getDate() + 2);

const picker = new easepick.create({
    element: "#datepicker",
    css: [
        "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css"
    ],
    zIndex: 50,
    lang: "fr-FR",
    format: "DD MMM YYYY",
    header: "Dates de location",
    LockPlugin: {
        minDate: date,
        selectForward: true
    },
    plugins: [
        "RangePlugin",
        "LockPlugin"
    ],
    RangePlugin: {
        locale: {
          one: 'jour',
          other: 'jours',
        },
    },
    // 替换原事件为onChange
    onChange: function (e) {
        // 获取开始和结束日期
        const startDate = picker.getStartDate();
        const endDate = picker.getEndDate();
        console.log("开始日期:", startDate);
        console.log("结束日期:", endDate);
    }
});

方法2：使用RangePlugin的onSelect事件 #

如果只想监听范围选择的完成事件，也可以在RangePlugin配置里加onSelect：

// ...其他配置不变
RangePlugin: {
    locale: {
      one: 'jour',
      other: 'jours',
    },
    onSelect: function (e) {
        const { startDate, endDate } = this; // this指向RangePlugin实例
        console.log("开始日期:", startDate);
        console.log("结束日期:", endDate);
    }
},

注意点 #

• 确保Easepick版本正确（你用的1.2.1是稳定版，没问题）
• 当用户只选了第一个日期时，endDate会是null，所以实际使用时最好加判断：

if (endDate) {
    // 处理结束日期
}

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