Ant Design DatePicker 组件设置默认时间的技巧

在 Ant Design 的 DatePicker 组件使用过程中，开发者经常会遇到需要设置默认时间而非默认的 00:00:00 的需求。本文将深入探讨这一常见场景的解决方案。

问题背景

当用户使用带有时间选择功能的 DatePicker 组件时，如果未指定具体时间值，组件默认会将时间部分设置为午夜 00:00:00。但在实际业务场景中，比如办公系统中，我们可能希望默认时间是上午 8:00 或其他工作时间。

解决方案

Ant Design 的 DatePicker 组件提供了 showTime 属性，通过它可以配置时间选择器的各种行为。其中，defaultValue 选项可以用来设置默认时间。

具体实现方式如下：

<DatePicker 
  showTime={{ 
    defaultValue: dayjs("08:00:00", "HH:mm:ss") 
  }} 
/>

实现原理

1. dayjs 的使用：这里使用了 dayjs 库来创建时间对象，它是 Ant Design 默认使用的时间处理库

2. showTime 配置：通过 showTime 对象中的 defaultValue 属性，我们可以覆盖组件默认的时间设置

3. 时间格式：示例中使用 "HH:mm:ss" 格式指定了 8 点整，开发者可以根据需要调整格式和具体时间

扩展应用

除了设置默认小时外，这种方法还可以用于：

1. 设置默认的分钟和秒数
2. 结合日期一起设置默认值
3. 根据不同用户角色设置不同的默认工作时间
4. 根据系统配置动态设置默认时间

注意事项

1. 确保项目中已正确安装并引入了 dayjs 库
2. 时间格式字符串需要与传入的时间字符串严格匹配
3. 在 TypeScript 项目中，注意类型定义的正确性
4. 当同时使用 defaultValue 和 value 属性时，需要注意它们的优先级关系

通过这种配置方式，开发者可以轻松实现符合业务需求的默认时间设置，提升用户体验和操作效率。