EasePick 本身并未提供原生的 open 事件,但通过监听输入框的点击操作,可以模拟出“打开”的逻辑流程;而 select 事件则是一个较为理想的“关闭”触发点——当用户确认并完成日期选择后,结合 iframe 高度的动态调整,便能实现精准响应。
EasePick 是一款轻量且现代化的日期选择器,其核心 API 中确实没有直接暴露 open 或 close 这类生命周期事件。官方文档列出的可用事件(如 render、view、preselect、select、clear)中,只有 select 能够较为稳定地反映用户已完成交互并提交选择——通常对应视觉上日历面板关闭的那个瞬间。至于“弹出面板打开”这一动作,则需要借助原生 DOM 机制来捕获。
✅ 正确的事件绑定策略
- 模拟“打开”事件:监听目标
元素的 click 事件,或者更健壮的 focus 事件。由于 EasePick 默认绑定在 input 上,点击输入框就会触发日历展开,这个时机与 UI 打开几乎完全同步。 - 捕获“关闭”时机:使用
picker.on('select', ...)——当用户点击日期并确认(例如点击“Apply”按钮或自动失焦提交)时触发,此时日历面板已经收起,正是重置 iframe 高度的理想时机。
⚠️ 注意:select 事件并不严格等同于“面板关闭”。例如,用户只单击了日期但没有确认(在
autoApply: false的情况下),面板依然保持打开状态。若需要更精确的关闭感知,可以补充监听 blur 事件,或使用setTimeout + document.activeElement来判断焦点是否已离开输入框。
? 示例代码(含 iframe 高度控制)
? 进阶建议
- 如果页面中存在多个 EasePick 实例,推荐使用事件委托,或为每个 input 添加唯一 data 属性,以避免全局 click 冲突。
- 在单页应用(SPA)中,务必在组件销毁时移除事件监听(例如
input.removeEventListener),防止内存泄漏。 - 对无障碍(a11y)友好:focus 事件比 click 更兼容键盘操作(如使用 Tab 键进入输入框),建议改用:
input.addEventListener('focus', () => { /* open logic */ });
通过合理组合原生 DOM 事件与 EasePick 的 select 回调,即可稳健地实现“打开时扩高、关闭时复位”的 iframe 自适应效果,完全无需依赖那些未提供的内部事件钩子。
