如何使用React DatePicker实现日期时间范围选择并解决dateRange不可迭代错误

云原生阿岚

2026-10-2

首先明确：react-datepicker 支持单个输入框同时选择带时间的日期范围功能，你遇到的报错是 onChange 回调返回值处理不当导致的。

报错原因

你开启了isClearable属性，当触发清空操作时，onChange 回调返回的update值为null，而非你预期的二元数组；另外首次选择起始日期时，部分版本回调返回的也会是非数组格式的值，直接赋值给dateRange后，对null/非数组值做解构const [startDate, endDate] = dateRange就会抛出dateRange is not iterable的错误。

修复方案

对 onChange 的返回值做兜底处理，同时补充shouldCloseOnSelect={false}属性避免选完起始日期后选择面板直接关闭，修改后的代码如下：

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function CustomDatePicker(props: any) {
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      timeInputLabel="Time:"
      onChange={(update: any) => {
        // 兜底处理：如果返回值为空/非数组，默认赋值为初始二元数组
        setDateRange(update ?? [null, null]);
      }}
      dateFormat="MM/dd/yyyy h:mm aa"
      isClearable={true}
      showTimeSelect
      // 新增：选完值不自动关闭面板，方便连续选择起始+结束的日期和时间
      shouldCloseOnSelect={false}
    />
  );
}

export default CustomDatePicker;