EasePick 本身未提供原生的 open 事件，但可通过监听输入框点击实现“打开”逻辑；select 事件可作为“关闭”触发点（用户确认选择后），结合 iframe 高度动态调整，实现精准响应。
easepick 本身未提供原生的 `open` 事件，但可通过监听输入框点击实现“打开”逻辑；`select` 事件可作为“关闭”触发点（用户确认选择后），结合 iframe 高度动态调整，实现精准响应。
EasePick 是一款轻量、现代化的日期/日期范围选择器，但其核心 API 中并未暴露 open 或 close 生命周期事件。官方文档列出的事件（如 render、view、preselect、select、clear）中，仅有 select 可稳定反映用户完成交互并提交选择（即视觉上关闭面板），而真正的“弹出面板打开”动作需借助原生 DOM 机制捕获。
✅ 正确的事件绑定策略
- 模拟“打开”事件：监听目标 <input> 元素的 click（或更健壮的 focus）事件。由于 EasePick 默认绑定在 input 上且点击即触发日历展开，该时机与 UI 打开高度一致。
- 捕获“关闭”时机：使用 picker.on('select', ...) —— 它在用户点击日期并确认（如点击“Apply”或失焦自动提交）时触发，此时日历面板已收起，是重置 iframe 的理想节点。
⚠️ 注意：select 并非严格等价于“面板关闭”，例如用户仅点击日期但未确认（autoApply: false 时），面板仍保持打开。若需更精确的关闭感知，可补充监听 blur 事件或使用 setTimeout + document.activeElement 判断焦点离开。
? 示例代码（含 iframe 高度控制）
<iframe id="myIframe" src="content.html" style="width:100%; height:400px;"></iframe>
<input id="datepicker" placeholder="Select date range" />
<script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1/dist/index.umd.min.js"></script>
<script>
const iframe = document.getElementById('myIframe');
const input = document.getElementById('datepicker');
// ✅ 模拟 OPEN：点击输入框时扩大 iframe 高度（为日历留出空间）
input.addEventListener('click', () => {
iframe.style.height = '800px'; // 根据实际日历高度调整
});
// ✅ CLOSE 逻辑：选择完成后恢复原始高度
const picker = new easepick.create({
element: input,
css: ['https://cdn.jsdelivr.net/npm/@easepick/bundle@1/dist/index.css'],
zIndex: 1000,
autoApply: true, // 确保点击即提交，使 select 更可靠
setup(picker) {
picker.on('select', (e) => {
console.log('Date selected → calendar closed');
iframe.style.height = '400px'; // 恢复默认高度
});
}
});
</script>? 进阶建议
- 若页面存在多个 EasePick 实例，推荐用事件委托或为每个 input 添加唯一 data 属性，避免全局 click 冲突。
- 在单页应用（SPA）中，注意销毁事件监听器（如 input.removeEventListener）防止内存泄漏。
- 对无障碍（a11y）友好：focus 比 click 更兼容键盘操作（如 Tab 进入输入框），可改用：
input.addEventListener('focus', () => { /* open logic */ });
通过合理组合原生 DOM 事件与 EasePick 的 select 回调，即可稳健实现“打开扩高、关闭复位”的 iframe 自适应效果，无需依赖未提供的内部事件钩子。
