如何关闭并重置easepick日期选择器？相关操作方法咨询

easepick默认是选完日期自动隐藏，若需要手动触发确认逻辑，可参考以下方案：

• 自定义确定按钮：借助easepick的setup钩子在选择器容器内添加按钮，绑定点击事件控制隐藏。示例代码：

const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  setup(picker) {
    // 创建确定按钮
    const confirmBtn = document.createElement('button');
    confirmBtn.textContent = '确定';
    confirmBtn.style.margin = '10px auto 0';
    confirmBtn.style.display = 'block';
    // 插入到选择器底部
    picker.container.appendChild(confirmBtn);
    // 点击后隐藏选择器，同时可处理选中日期
    confirmBtn.addEventListener('click', () => {
      picker.hide();
      // 获取选中的日期范围（范围选择时）
      console.log('开始日期:', picker.startDate, '结束日期:', picker.endDate);
    });
  },
  // 若要禁用自动隐藏，设置autoHide为false
  autoHide: false
});

• 依赖默认自动隐藏：保持autoHide: true（默认值），选择完日期（范围选择需选完结束日期）后，选择器会自动隐藏。
• 点击外部区域触发隐藏：如果开启了autoHide，点击页面非选择器区域也会自动隐藏选择器；也可手动监听全局点击事件，判断点击区域后调用picker.hide()。

要将已选择的日期恢复为空状态，可通过以下方式实现：

• 添加重置按钮：在页面中新增重置按钮，点击时清空输入框并同步重置picker状态：

const resetBtn = document.getElementById('reset-btn');
resetBtn.addEventListener('click', () => {
  const dateInput = document.getElementById('datepicker');
  dateInput.value = '';
  // 调用picker的clear方法重置选择状态
  picker.clear();
});

• 同步输入框手动清空操作：允许用户手动删除输入框内容时，监听input事件，当输入框为空时重置picker：

const dateInput = document.getElementById('datepicker');
dateInput.addEventListener('input', () => {
  if (!dateInput.value.trim()) {
    picker.clear();
  }
});

• 直接调用picker实例方法：在业务逻辑需要重置的位置，直接执行picker.clear()，同时清空对应输入框的value值，保证选择器和输入框状态一致。

内容的提问来源于stack exchange，提问作者Dennis Thrysøe