如何在单个react-datepicker组件中设置默认选中的日期范围

你使用带selectsRange属性的单个DatePicker组件时，无需拆分为两个组件，直接给startDate和endDate绑定的状态设置初始值即可实现默认日期区间选中。

完整实现示例 #

依赖导入 #

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

组件逻辑 #

function RangeCalendar() {
  // 定义默认选中的日期区间：示例为2024年5月1日至2024年5月10日
  // 注意JS原生Date月份从0开始计数，5月对应参数为4
  const defaultStart = new Date(2024, 4, 1);
  const defaultEnd = new Date(2024, 4, 10);

  // 初始化区间状态
  const [dateRange, setDateRange] = useState([defaultStart, defaultEnd]);
  const [startDate, endDate] = dateRange;

  return (
    <DatePicker
      inline
      monthsShown={2}
      selectsRange
      startDate={startDate}
      endDate={endDate}
      onChange={(update) => {
        setDateRange(update);
      }}
    />
  );
}

export default RangeCalendar;

注意事项 #

• 传给组件的日期必须是原生JS Date对象，如果使用Day.js、Moment等日期库，需要先调用对应的转Date方法（如dayjsInstance.toDate()）再传入
• 初始值必须保证endDate晚于startDate，否则默认区间不会生效
• 如果需要默认选中的是今日前后的区间，可以直接用new Date()结合日期计算生成初始值

内容的提问来源于stack exchange，提问作者Joan-GS