React-Datepicker结合TypeScript时onChange事件的类型定义问题

一、dates参数的正确类型 #

当你使用React-Datepicker的范围选择功能（设置selectsRange={true}）时，onChange回调的dates参数类型应为[Date | null, Date | null]。原因很简单：

• 起始、结束日期都可能处于未选择状态（比如只选了起始日期，或清空了选择），所以需要允许null；
• 选中的日期是标准Date对象，不是时间戳数字，用number类型自然会不匹配。

修正后的onChange函数：

const onChange = (dates: [Date | null, Date | null]) => {
  const [start, end] = dates;
  setStartDate(start);
  setEndDate(end);
};

二、TypeScript中React-Datepicker的完整使用示例 #

1. 安装依赖 #

先装好组件和对应的TypeScript类型声明：

npm install react-datepicker @types/react-datepicker
# 用yarn的话
yarn add react-datepicker @types/react-datepicker

别忘了导入组件样式，不然日期选择器会没样式：

import 'react-datepicker/dist/react-datepicker.css';

2. 完整组件代码 #

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

const RangeDatePicker = () => {
  // 显式声明状态类型，让TypeScript检查更严谨
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  const [endDate, setEndDate] = useState<Date | null>(null);

  const onChange = (dates: [Date | null, Date | null]) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={onChange}
      selected={startDate}
      placeholderText="选择日期范围"
    />
  );
};

export default RangeDatePicker;

3. 关键注意点 #

• 给useState显式加泛型类型（Date | null），避免TypeScript自动推断出模糊类型；
• 范围选择必须开selectsRange={true}，否则onChange的参数会是单个Date | null，不是数组；
• 必须导入CSS文件，不然日期选择器的样式会完全错乱。

内容的提问来源于stack exchange，提问作者joey