Facing issue with the react-calender defaultStartDate

Question

I am using the react-calender. There are two calendars one is the start date another one is the end date. Consider the Start date shows the may month then I choose July 1. I set the end date's default will be selected start date month(end-date should show July month) But still it shows the current month only.

Here I added codesandbox link. How to fix that issue?

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

Answer 1

Maintain 2 different states for startDate and endDate and and set value based on respective state.

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