Semi-Design DatePicker组件预设时间范围支持动态函数解析

Semi-Design作为字节跳动开源的React UI组件库，其DatePicker日期选择器组件在2.52.0-beta.0版本中迎来了一项重要功能增强。该版本为DatePicker的预设时间范围(presets)配置项新增了对函数类型的支持，使开发者能够更灵活地处理动态时间场景。

功能背景

在实际业务开发中，日期选择器经常需要预设一些常用的时间范围选项，如"今天"、"本周"、"本月"等。传统实现方式是在presets配置中直接写死开始和结束时间，例如：

presets: [
  {
    text: '今天',
    start: new Date(2024, 0, 24),
    end: new Date(2024, 0, 24)
  }
]

这种方式存在明显局限性 - 当组件在多日或多地点使用时，静态日期不会自动更新，导致业务逻辑错误。

新特性解析

2.52.0版本通过支持函数类型参数完美解决了这个问题。现在开发者可以这样配置：

presets: [
  {
    text: '今天',
    start: () => new Date(),
    end: () => new Date()
  }
]

函数会在每次渲染时动态执行，确保总是获取当前最新时间。这种设计带来了几个显著优势：

1. 时间准确性：自动保持与系统时间同步
2. 代码复用性：同一配置可在不同时间点复用
3. 时区适应性：函数内可加入时区处理逻辑
4. 性能优化：相比监听时间变化更轻量

实现原理

在React组件层面，Semi-Design在内部处理presets配置时增加了类型判断：

const getActualDate = (date) => {
  if (typeof date === 'function') {
    return date();
  }
  return date;
};

// 使用时
const actualStart = getActualDate(preset.start);
const actualEnd = getActualDate(preset.end);

这种实现方式保持了API的向后兼容性，既支持原有的Date对象直接传入，也支持新的函数类型。

使用建议

对于常见场景，推荐以下实践：

1. 动态范围：处理"最近7天"等相对时间范围

   start: () => new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
   end: () => new Date()
   

2. 工作日计算：跳过周末的特殊日期范围

   start: () => calculateWorkday(new Date(), -5),
   

3. 时区处理：针对国际化场景

   start: () => convertToTargetTimezone(new Date(), 'Asia/Shanghai'),
   

总结

Semi-Design对DatePicker组件的这一增强，体现了其"开发者友好"的设计理念。通过支持函数类型的动态时间获取，既解决了实际业务中的痛点，又保持了API的简洁性。这种设计模式也值得其他组件库在类似场景中借鉴，特别是在需要处理动态数据的UI控件中。