当句柄选择时，react-datepicker选择对象范围

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

const App = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleStartDateChange = (date) => {
    setStartDate(date);
  };

  const handleEndDateChange = (date) => {
    setEndDate(date);
  };

  return (
    <div>
      <DatePicker
        selected={startDate}
        onChange={handleStartDateChange}
        selectsStart
        startDate={startDate}
        endDate={endDate}
        minDate={new Date()} // 设置最小日期为今天
        maxDate={new Date(new Date().getFullYear(), 11, 31)} // 设置最大日期为今年的12月31日
      />
      <DatePicker
        selected={endDate}
        onChange={handleEndDateChange}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate} // 设置最小日期为开始日期
        maxDate={new Date(new Date().getFullYear(), 11, 31)} // 设置最大日期为今年的12月31日
      />
    </div>
  );
};

export default App;