在 kanban 应用中，通过 `classlist.remove("hide")` 显示 `` 后，日历不会自动弹出；需调用 `showpicker()` 方法手动触发。
在现代浏览器（Chrome 102+、Edge 102+、Firefox 113+、Safari 16.4+）中，<input type="date"> 元素默认点击时会唤起系统原生日历控件。但当该输入框是通过 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(); // 降级：仅聚焦（部分旧浏览器兼容）
}
}⚠️ 注意事项：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- showPicker() 是异步且无返回值的，不可 await，也不抛异常（不支持时静默忽略）；
- 必须确保元素已渲染完成且可见（即 DOM 已更新、display 不为 none），否则调用无效；
- 调用前建议检查方法是否存在（如上例），以提升跨浏览器兼容性；
- Safari 16.4+ 才开始支持 showPicker()，若需支持更早版本，可结合 focus() + 用户引导提示（如 tooltip：“点击输入框选择日期”）。
? 补充技巧：如果你希望用户编辑体验更连贯，还可同步聚焦到日期输入框：
dateInput.focus(); dateInput.select(); // 可选：全选当前值，便于快速覆盖
总结：动态显示 <input type="date"> 后，不能依赖“自动弹出”，必须主动调用 showPicker()。这是现代 Web API 的明确设计，也是实现专业级表单交互的关键细节。
