shadcn-ui-expansions 项目中 DateTimePicker 组件的时间初始值设置详解

组件功能概述

shadcn-ui-expansions 项目中的 DateTimePicker 组件是一个功能强大的日期时间选择器，它允许用户通过直观的界面选择日期和时间。该组件基于流行的 UI 框架构建，提供了灵活的配置选项。

初始时间值设置方案

默认行为分析

默认情况下，DateTimePicker 组件在未设置初始值时，时间部分会显示为 00:00（午夜）。这在某些业务场景下可能不符合需求，比如需要默认显示当前时间或特定业务时间。

解决方案演进

1. 直接设置初始值
   最简单的解决方案是直接为组件传入一个带有特定时间的 Date 对象：

   const [date, setDate] = useState(new Date());
   

   这种方法会立即显示当前时间，但会失去"未选择"状态（undefined）。

2. defaultPopupValue 属性
   项目最新版本引入了更灵活的 defaultPopupValue 属性，专门用于控制弹出选择器时的默认显示时间，而不影响实际值：

   <DateTimePicker 
     value={date} 
     onChange={setDate}
     defaultPopupValue={new Date()}
   />
   

   这种方案完美解决了既要保持初始值为 undefined，又要在用户打开选择器时显示合理默认时间的需求。

技术实现原理

在底层实现上，DateTimePicker 组件内部维护了两个状态：

1. 实际值（value） - 用户最终选择的日期时间
2. 弹出框显示值 - 用于控制选择器打开时显示的时间

当用户未选择任何值时，组件会使用 defaultPopupValue 作为弹出框的初始显示时间；一旦用户选择了日期，该值会被更新为用户选择的时间。

最佳实践建议

1. 对于需要严格区分"未选择"状态的场景，使用 defaultPopupValue 方案
2. 对于不关心初始状态是否为 undefined 的场景，可以直接传入初始 Date 对象
3. 业务时间需求（如默认显示营业时间 09:00）可以通过组合使用这两种方案实现

总结

shadcn-ui-expansions 的 DateTimePicker 组件通过灵活的 API 设计，提供了多种控制初始时间显示的方式。开发者可以根据具体业务需求选择最适合的方案，既保证了用户体验的合理性，又满足了业务逻辑的严谨性。