React DatePicker选中日期范围缺失起始日期的技术求助

你的代码存在两个核心问题导致起始日期缺失，同时还存在跨月场景下日期生成失效的隐患：

1. 循环逻辑未包含起始日期，且直接修改了moment可变对象
2. 依赖日期的getDate()数值进行循环，跨月时会出现逻辑错误（比如起始日是31号、结束日是2号时，循环不会执行）

修正后的代码 #

import "./styles.css";
import moment from "moment";
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [dateRange, setDateRange] = React.useState([null, null]);
  const [startDate, endDate] = dateRange;
  const daterray = [];

  // 仅当起始和结束日期都存在时生成日期数组
  if (startDate && endDate) {
    // 克隆起始日期的moment对象，避免修改原对象
    let currentDate = moment(startDate);
    // 先加入起始日期
    daterray.push(currentDate.format("DD/MM"));
    
    // 循环生成中间日期，直到等于结束日期
    while (currentDate.isBefore(endDate)) {
      currentDate.add(1, "day");
      daterray.push(currentDate.format("DD/MM"));
    }
  }

  return (
    <div className="App">
      <DatePicker
        selectsRange
        startDate={startDate}
        endDate={endDate}
        onChange={(update) => {
          setDateRange(update);
        }}
        isClearable
      />
      <div>
        <h5>Selected Dates </h5>
        <p>{daterray.join(", ")}</p>
      </div>
    </div>
  );
}

关键改动说明 #

• 避免moment对象突变：使用moment(startDate)克隆起始日期，防止修改原对象引发的日期混乱
• 包含起始日期：先将起始日期加入结果数组，再循环生成后续日期
• 基于日期对象循环：用isBefore()判断是否到达结束日期，适配跨月、跨年等所有日期范围场景
• 优化显示格式：用join(", ")让日期列表更易读

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