react-datepicker支持秒级的时间选择

开喷

在官方的例子中只支持到了分钟级别的时间选择。如果要支持秒级需要使用customTimeInput属性自定义。

customTimeInput属性官方的描述也是一言难尽。customTimeInput传递进去的是一个组件，但是组件又不传递参数，实在是很违背开发直觉，在项目中使用一堆报错。

() => {
  const [startDate, setStartDate] = useState(new Date());
  const ExampleCustomTimeInput = ({ date, value, onChange }) => (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      style={{ border: "solid 1px pink" }}
    />
  );
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeInput
      customTimeInput={<ExampleCustomTimeInput />}
    />
  );
};

最后在stackoverflow的一篇文章中找到解决办法。解决方法使用得也很别扭，但是为了能用，忍了。

export const MyTimePicker = (props) => {
  // todo

  const handleChangeTime = (date, time) => {
    const [hh, mm, ss] = time.split(':');
    // @ts-ignore
    const targetDate = date instanceof Date && !isNaN(date) ? date : new Date();
    targetDate.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0);
    // this.handleDateChange(targetDate);
    changeValue(targetDate);
  };

  // CustomTimeInput刷新会重置一些组件的交互状态。这里使用useMemo，避免每次时间状态刷新之后，CustomTimeInput也跟着刷新。
  const CustomTimeInput = useMemo(() => {
    return ({ date, onChangeCustom }) => {
      // @ts-ignore
      const value =
        // @ts-ignore
        date instanceof Date && !isNaN(date)
          ? // Getting time from Date beacuse `value` comes here without seconds
            date.toLocaleTimeString('it-IT')
          : '';

      return (
        <input
          type="time"
          step="1"
          value={value}
          onChange={(event) => onChangeCustom(date, event.target.value)}
        />
      );
    };
  }, []);

  return (
    <div>
      <ReactDatePicker
        // 略
        showTimeInput
        timeInputLabel="时间："
        dateFormat="yyyy-MM-dd HH:mm:ss"
        // @ts-ignore
        customTimeInput={<CustomTimeInput onChangeCustom={handleChangeTime} />}
      />
    </div>
  );
};

最终效果

版本

react-datepicker@3.8.0

参考

react-datepicker time selection with seconds