如何选择日期范围并在没有多个datepickers的情况下更新日期？

Question

我正在使用React-DatePicker，并且正在尝试提出逻辑以具有2个字段，并仅使用一个日期范围选择器更新开始日期和结束日期。我在这里写的逻辑是单独拥有2个日期选择器，但是我不希望它以这种方式。另外，我坚持反应日期，因为它允许我手动输入日期。

import React, { useState } from "react";

import DatePicker from "react-datepicker";

export default function TableDatePicker() {
 const [startDate, setStartDate] = useState(new Date());
 const [endDate, setEndDate] = useState(new Date());

 return (
   <div>
     <DatePicker
       selected={startDate}
       selectsStart
       startDate={startDate}
       endDate={endDate}
       onChange={date => setStartDate(date)}
     />
     <DatePicker
       selected={endDate}
       selectsEnd
       startDate={startDate}
       endDate={endDate}
       minDate={startDate}
       onChange={date => setEndDate(date)}
     />
   </div>
 );
}

我还从MUI/采摘者那里进行了一些研究，但是尽管其他期望是好的，但不允许手动输入日期。

我在这里错过了什么吗？

Answer 1

在react-datepicker文档中，它具有大约一个datepicker的日期范围

import React, { useState } from "react";

import DatePicker from "react-datepicker";

export default function TableDatePicker() {
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(null);

    const onChange = (dates) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
    };
    
    return (
        <DatePicker
            selected={startDate}
            onChange={onChange}
            startDate={startDate}
            endDate={endDate}
            selectsRange
            inline
        />
    );
}

以包含startdate，endDate和hidden

import React, { useState, useRef } from "react";
import dayjs from "dayjs";

function App() {
  const datePickerRef = useRef(null);
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);
  const onChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };
  return (
    <div>
      <div onClick={() => datePickerRef.current.setOpen(true)}>
        <input type="text" value={dayjs(startDate).format("MM/DD/YYYY")} />
        <input
          type="text"
          value={endDate ? dayjs(endDate).format("MM/DD/YYYY") : ""}
        />
      </div>
      <DatePicker
        selected={startDate}
        onChange={onChange}
        startDate={startDate}
        endDate={endDate}
        selectsRange
        ref={datePickerRef}
      />
    </div>
  );
}

，或者您可以创建2个自定义输入， CSS

.react-datepicker__input-container {
  display: none;
}

您可以在我的 codesandbox 。希望它有帮助！