Date and Time Picker如何通过回车/内置按钮关闭并添加保存按钮

1. 回车键/内部按钮触发关闭选择器 #

核心实现思路是通过受控模式管理选择器的显隐状态，所有关闭逻辑最终都指向修改显隐状态值即可：

• 第一步先将选择器调整为受控模式：定义isPickerOpen布尔值状态，绑定到组件的open/visible属性上，所有打开、关闭操作都通过修改这个状态值实现
• 回车键关闭实现：给选择器的输入框、弹出面板容器绑定keydown事件，当检测到按下的按键为Enter时，阻止默认行为，直接将isPickerOpen置为false即可。如果需要回车同步确认选中值，可以在关闭逻辑前加一步值同步的操作，参考代码：

// React 语法示例，Vue 逻辑一致仅写法不同
const handleKeydown = (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    setSelectedValue(tempValue); // 同步面板内临时选中的日期时间值
    setIsPickerOpen(false); // 关闭选择器面板
  }
}

• 内部按钮关闭实现：如果是组件自带的内部按钮，直接在按钮的点击回调里执行setIsPickerOpen(false)即可；如果是自定义插入的按钮，绑定相同的关闭逻辑就行。

2. 选择器内置保存按钮实现方案 #

该需求完全可以实现，不存在技术限制，主流组件库的日期时间选择器都支持面板自定义区域能力，实现步骤如下：

• 找到组件提供的面板底部自定义插槽/渲染参数，常见命名为renderExtraFooter、panel-footer、footer，在该自定义区域内渲染保存按钮
• 给保存按钮绑定点击事件：触发时先校验当前选中的日期、时间值是否完整合法，校验通过后将面板内临时选中的值同步到表单绑定的正式字段，再执行关闭面板的逻辑
• 交互优化：可以给保存按钮增加禁用规则，当用户没有选完日期、时间必填项时，按钮置灰不可点击，避免提交无效值

如果使用的组件版本过低不支持自定义插槽，可以在面板弹出的生命周期钩子中，通过原生DOM操作向面板底部区域插入按钮节点，再绑定对应的保存、关闭事件即可，优先推荐使用组件原生插槽能力，兼容性和维护性更好。

内容的提问来源于stack exchange，提问作者user19256390