面对反应日历 defaultStartDate 的问题

编程问答 2022-05-09

问题描述

我正在使用反应日历。 有两种日历，一种是开始日期，另一种是结束日期。 考虑开始日期显示月份，然后我选择 7 月 1 日。我设置结束日期的默认值将选择开始日期月份（结束日期应显示七月份）但它仍然只显示当前月份。

这里我添加了代码和框链接。如何解决这个问题？

https://codesandBox.io/s/nostalgic-murdock-q11cv?file=/src/App.js

解决方法

为 startDate 和 endDate 维护 2 个不同的状态，并根据各自的状态设置值。

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

  return (
    <div className="App">
      <h1> Start Date </h1>
      <Calendar onChange={(date) => setStartDate(date)} value={startDate} />
      <h1> End Date </h1>
      <Calendar onChange={(date) => setEndDate(date)} value={endDate} />
    </div>
  );
}

CODESANDBOX DEMO

react-calendarreactjsreactjsreactjsreactjs