如何让 JavaScript 动态显示的 date 输入框自动弹出原生日历

在 kanban 应用中，通过 `classlist.remove(“hide”)` 显示 `` 后，日历不会自动弹出；需调用 `showpicker()` 方法手动触发。

在现代浏览器（chrome 102+、edge 102+、firefox 113+、safari 16.4+）中， 元素默认点击时会唤起系统原生日历控件。但当该输入框是通过 javaScript 动态移除隐藏类（如 .hide）后首次获得焦点或被“激活”时，浏览器并不会自动打开日历面板——这是符合规范的行为，而非 bug。

要解决这个问题，只需在显示日期输入框后，显式调用 inputElement.showPicker() 方法。该方法会以编程方式触发原生日历选择器，效果等同于用户手动点击输入框。

✅ 正确做法（修改你的 Edit 按钮逻辑）：

if (event.target.classlist.contains("edit")) {   const formInput = card.querySelector('input[name="task"]');   const dateInput = card.querySelector('input[name="date"]'); // ✅ 更安全地定位（避免 closest 冗余）   const datedisplay = card.querySelector('.date');    formInput.removeAttribute("disabled");   dateInput.classList.remove("hide");   dateInput.value = dateDisplay.textContent.trim();   dateDisplay.classList.add("hide");   event.target.classList.add("hide");   event.target.nextElementSibling.classList.remove("hide");    // ? 关键修复：手动唤起日历   if (typeof dateInput.showPicker === 'function') {     dateInput.showPicker();   } else {     console.warn("showPicker() is not supported in this browser — falling back to focus.");     dateInput.focus(); // 降级：仅聚焦（部分旧浏览器兼容）   } }

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

• showPicker() 是异步且无返回值的，不可 await，也不抛异常（不支持时静默忽略）；
• 必须确保元素已渲染完成且可见（即 dom 已更新、display 不为 none），否则调用无效；
• 调用前建议检查方法是否存在（如上例），以提升跨浏览器兼容性；
• Safari 16.4+ 才开始支持 showPicker()，若需支持更早版本，可结合 focus() + 用户引导提示（如 tooltip：“点击输入框选择日期”）。

? 补充技巧：如果你希望用户编辑体验更连贯，还可同步聚焦到日期输入框：

dateInput.focus(); dateInput.select(); // 可选：全选当前值，便于快速覆盖

总结：动态显示 后，不能依赖“自动弹出”，必须主动调用 showPicker()。这是现代 Web API 的明确设计，也是实现专业级表单交互的关键细节。