Bits-UI 日历组件时间保留问题分析与解决方案

在基于 Svelte 的 Bits-UI 组件库开发过程中，日历组件(Calendar)与时间选择功能的联动存在一个值得注意的行为特性。当开发者使用支持时间信息的日期类型(ZonedDateTime/CalendarDateTime)作为绑定时，在交互过程中会出现时间信息意外重置的现象。

问题现象

具体表现为：当用户打开日历弹窗后，如果先修改了时间输入框的值，再选择新的日期，最终得到的结果会丢失中间步骤的时间修改。例如：

1. 初始值：2025-07-26 10:00
2. 修改时间为15:30
3. 选择新日期27日
4. 实际结果：2025-07-27 10:00（时间回退到初始状态）

技术原理分析

这种现象源于组件内部的状态管理机制。Calendar组件在打开时会缓存初始的DateValue对象，当选择新日期时，它只更新日期部分而保留了缓存中的原始时间信息。这种设计在仅使用CalendarDate类型时没有问题，但对于包含时间的复合类型就会产生不符合预期的行为。

从API设计角度看，当组件接受ZonedDateTime/CalendarDateTime这类包含时间信息的类型作为参数时，用户合理期望组件应该完整处理所有日期时间信息，而不仅仅是日期部分。

解决方案

临时解决方案

开发者可以在onChange事件中手动合并日期和时间：

<Calendar 
  value={dateValue}
  onChange={(newDate) => {
    // 保留原时间信息，仅更新日期部分
    dateValue = newDate.set({
      hour: dateValue.hour,
      minute: dateValue.minute
    });
  }}
/>

设计建议

从组件设计角度，可以考虑以下改进方向：

1. 类型明确化：如果组件仅处理日期部分，应该限制只接受CalendarDate类型
2. 智能合并：当检测到输入值包含时间信息时，自动保留最新的时间部分
3. 文档说明：明确标注组件对各类日期时间类型的处理方式

最佳实践

在实际开发时间选择器组件时，建议：

1. 对于简单日期选择，使用CalendarDate类型
2. 需要时间选择时，考虑分离日期和时间的选择逻辑
3. 实现自定义的value合并逻辑，确保交互一致性
4. 在复杂场景下，可以封装高阶组件处理日期时间的同步问题

这个问题提醒我们在设计日期时间相关组件时，需要特别注意时间信息的连续性，确保组件行为符合用户的自然预期。