Search code examples
reactjsreact-datepicker

Why I should add attribute selected to get hour, min, second information in react-datepicker with range?

I tried to use react-datepicker with range.
If I didn't set the attribute selected={startDate}, when I consoled, I always got Tue Apr 19 2022 00:00:00 GMT+0800 (xxxx standardtime) without time information. However, when I applied attribute selected, I could get Tue Apr 19 2022 16:19:09 GMT+0800 (xxxx standardtime) with time information. I don't wan't to lose the time information, but I don't know why I must applied the selected information. And in this situation, I only set selected for startDate , which make endDate not update....

Thanks.

      const [dateRange, setDateRange ] = useState([new Date(), new Date()])
      <DatePicker
            selected={dateRange[0]} // startDate
            startDate={dateRange[0]}
            endDate={dateRange[1]}
            onChange={(daterange) => {
              console.log(daterange)

            }}
            {...props}
        />
Solution

  • selected prop is used to keep selected the date you already select while interacting with datepicker. If you don't add this prop, when you click on date picker, it restarts always from the startDate.

    If I run this:

    () => {
  const [dateRange, setDateRange] = useState([new Date(), new Date()])
  return (
    <DatePicker
       startDate={dateRange[0]}
       endDate={dateRange[1]}
       onChange={(daterange) => {
          console.log(daterange)
       }}
     />
  );
};

    onChange prints always the date you selected with midnight time as default. Not only but if you click again to datepicker, you see that picker returns to startDate value (even if you selected a different date in previous interaction).

    So selected prop is, let me say, "mandatory" (also because if you don't add it, you are not able to see date you selected in DatePicker text area):

    enter image description here

    Now, if you want to edit startDate and also endDate you should use selectsRange prop in this way:

    () => {
  const [dateRange, setDateRange] = useState([new Date(), new Date()])
  return (
    <DatePicker
       selected={dateRange[0]}
       startDate={dateRange[0]}
       endDate={dateRange[1]}
       onChange={(daterange) => {
          setDateRange(daterange);
          console.log(daterange);         
       }}
       selectsRange
     />
  );
};

    Now datepicker allows you to select an interval and onChange prints every time you select a date: so, when you select the start date of the interval you will see:

    [Fri Apr 01 2022 11:15:55 GMT+0200 (Ora legale dell’Europa centrale), null]

    the end date is null. Then, when you select the end date of the interval you will see:

    [Fri Apr 01 2022 11:15:55 GMT+0200 (Ora legale dell’Europa centrale), Fri Apr 22 2022 11:15:55 GMT+0200 (Ora legale dell’Europa centrale)]