React-calendar: Question: How would I be able to return the value of a range?

[PrinceJelly]

Hey there! I really love your library although I'm having a hard time finding some documentation on it to use it properly.
I'm wondering how would I be able to return the range? I noticed that there's a returnValue property for the array of ["range"]

I figured out how to return a single date, although I end up getting the error:
"TypeError: selectedValue.toDateString is not a function" when I have "selectedRange={true"} implemented.

If anyone is willing to help me out with this that would be great!! Thank you!

code:

export default function Calender() {
  const [selectedValue, setSelectedValue] = useState(new Date());

  const returnValue = (value) => {
    setSelectedValue(value);
  };
  console.log({ returnValue });
  return (

    <section>
      <Calendar
        onChange={returnValue}
        value={selectedValue}
        returnValue={"range"}
        selectRange={true}
        maxDate={new Date()}
        minDate={new Date(2019, 11, 31)}
        next2Label={null}
        prev2Label={null}
      />
      <section>{selectedValue.toDateString()}</section>
    </section>
  );
}

[wojtekmaj]

For any lost soul that could stumble upon this ticket: when selectRange is true, onChange returns range of dates, so to access "date from" you'll need value[0] and to access "date to" you'll need value[1].

[PrinceJelly]

Hey there! Thanks for your reply! The reason why I closed the ticket, as I solved my issue.
I'll share my code below for others with questions 👍 :

export default function Calender() {
 **const [selectedValue, setSelectedValue] = useState(new Date(), []);**
  return (
    <section className="calendar">
      <Calendar
        onClickDay={openModal}
      ***onChange={setSelectedValue}***
      ***value={selectedValue}***
        ***selectRange={true}***
        maxDate={new Date()}
        minDate={new Date(2019, 11, 31)}
        next2Label={null}
        prev2Label={null}
        prevLabel={arrowLeft}
        nextLabel={arrowRight}
      />
      <div className="modal--container">
<ExampleRenderValues selectedValue={selectedValue} />
      </div>
    </section>
  );
}

The second section here is where you'd render your values, and whether or not if you choose a single date or a between range two dates.

export default function ExampleRenderValues ({ selectedValue}) {

  const DATE_OPTIONS = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
  const DATE_OPTIONS_SHORT = { weekday: "short", year: "numeric", month: "short", day: "numeric" };

  return !selectedValue[0] ? (
    ""
  ) : (
      <section>
          {selectedValue[0].getDate() === selectedValue[1].getDate() ? (
              {selectedValue[0].toLocaleDateString("en-US", DATE_OPTIONS)}
          ) : (
              {selectedValue[0].toLocaleDateString("en-US", DATE_OPTIONS_SHORT)} {" - "} 
              {selectedValue[1].toLocaleDateString("en-US", DATE_OPTIONS_SHORT)}
          )}
      </section>
  );
}