解决TimePicker时间组件在跨时区场景下的疑难杂症

我的写法，亲测靠谱

最近在项目里用TimePicker踩了不少坑，分享一下我的最佳实践代码和思路。我一般会用Ant Design的TimePicker组件，功能比较齐全，社区支持也好。下面是我在实际项目中常用的代码：

import React, { useState } from 'react';
import { TimePicker } from 'antd';
import moment from 'moment';

const CustomTimePicker = ({ value, onChange }) => {
  const [time, setTime] = useState(value || null);

  const handleChange = (timeValue) => {
    setTime(timeValue);
    if (onChange) {
      onChange(timeValue ? timeValue.format('HH:mm:ss') : null);
    }
  };

  return (
    <TimePicker 
      value={time ? moment(time, 'HH:mm:ss') : null} 
      format="HH:mm:ss" 
      onChange={handleChange} 
      placeholder="请选择时间"
      allowClear
    />
  );
};

export default CustomTimePicker;

这段代码看起来简单，但里面包含了很多实践经验。首先，我用moment来处理时间格式，虽然现在day.js也很流行，但我发现moment的兼容性和稳定性更好。其次，我特意加了allowClear属性，这在实际项目中超级实用，用户经常需要清空选择。

这几种错误写法，别再踩坑了

说几个常见的坑，都是我亲身经历过的教训。首先是这种写法：

<TimePicker defaultValue={moment()} />

看着挺正常对吧？但这会导致每次组件重新渲染时都会重置时间为当前时间！这个问题折腾了我大半天才找到原因。正确的做法是通过state来管理值，就像我前面的最佳实践那样。

还有个更隐蔽的坑：

<TimePicker 
  value={selectedTime} 
  onChange={(time) => setSelectedTime(time)} 
/>

乍一看没问题，但如果selectedTime是null或undefined时，组件会报错。必须像我之前写的那样，做严格的非空判断。

实际项目中的坑

在真实项目中，有几点特别需要注意：

• 时区问题：前后端交互时一定要统一时区，建议都用UTC时间存储。我就遇到过一个case，前端显示北京时间，后端存的是UTC时间，结果差了8小时。
• 时间格式：尽量统一使用’HH:mm:ss’这种标准格式，不要自定义太奇怪的格式。之前有个项目用了’hh:mm a’这种12小时制，导致很多用户选错时间。
• 移动端适配：原生TimePicker在移动端体验很差，建议搭配popup使用。我一般会这样处理：

import { Popup } from 'antd-mobile';

<Popup visible={showPicker} onClose={() => setShowPicker(false)}>
  <TimePicker 
    value={time} 
    onChange={handleChange} 
    format="HH:mm"
  />
</Popup>

还有一个容易忽略的问题：国际化。记得在项目初始化时就配置好locale，否则到后期改起来很麻烦：

import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

其他需要注意的小细节

说几个我觉得挺有用的tips：

• 给TimePicker加个disabledHours方法很有用，比如限制只能选择工作时间：

<TimePicker
  disabledHours={() => {
    const hours = [];
    for (let i = 0; i < 24; i++) {
      if (i < 9 || i > 18) hours.push(i);
    }
    return hours;
  }}
/>

• 如果需要限制最小间隔，比如只能选整点或半点，可以用disabledMinutes：

<TimePicker
  disabledMinutes={(selectedHour) => {
    return selectedHour % 30 !== 0 ? Array(60).fill().map((_, i) => i) : [];
  }}
/>

这里要注意，这两个方法千万别直接返回固定数组，要根据当前选择动态计算，否则会影响用户体验。

结尾唠叨几句

以上就是我对TimePicker的一些实战总结，都是踩过坑后的经验之谈。说实话，这个组件看似简单，但真要在各种场景下都用得好，还是需要花不少心思的。

这些方案可能不是最完美的，但都是经过多个项目验证的可靠写法。有更好的实现方式欢迎评论区交流，尤其是移动端适配这块，我觉得还有优化空间。