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

在使用 Ant Design 的 DatePicker 日期选择器组件时，开发者经常会遇到一个常见需求：当用户选择日期时，如何设置默认的时间值而不是默认的 00:00:00。本文将详细介绍几种实现这一需求的解决方案。

问题背景

DatePicker 组件在用户选择日期时，默认会将时间部分设置为 00:00:00。但在实际业务场景中，我们可能需要设置一个更合理的默认时间，例如早上8点。

解决方案

使用 showTime 属性

Ant Design 的 DatePicker 组件提供了 showTime 属性来显示时间选择面板。我们可以通过配置这个属性来设置默认时间：

import { DatePicker } from 'antd';
import dayjs from 'dayjs';

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

这种方法利用了 showTime 属性的 defaultValue 配置项，通过 dayjs 对象指定默认时间为早上8点。

结合 defaultValue 使用

如果需要同时设置默认日期和时间，可以结合使用 defaultValue 属性：

<DatePicker
  showTime
  defaultValue={dayjs("2025-01-01 08:00:00", "YYYY-MM-DD HH:mm:ss")}
/>

使用 format 属性

为了确保时间显示格式符合预期，可以添加 format 属性：

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

注意事项

1. 确保项目中已安装 dayjs 库，因为 Ant Design v5+ 使用 dayjs 替代了 moment.js
2. 当使用受控组件时，需要通过 value 和 onChange 来管理状态
3. 如果需要更复杂的时间默认值逻辑，可以在 onChange 回调中处理

总结

通过合理配置 Ant Design DatePicker 组件的 showTime 属性，开发者可以轻松实现自定义默认时间的功能。这种方法不仅适用于设置早上8点，也可以灵活调整为任何需要的默认时间值，大大提升了组件的实用性和用户体验。

对于更复杂的时间处理需求，建议查阅 Ant Design 的官方文档，了解 DatePicker 组件的更多高级用法和配置选项。