showTimeSelect does not work when working with ranges.

[austinjones-niantic]

Describe the bug showTimeSelect does not work when working with ranges. I noticed it in your demo but thought it was just acting a little iffy. I just realized though that it's a bug. I can click on one date (while in range mode) and then try and click on a time, and i get this error:

ncaught TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at _nonIterableRest (nonIterableRest.js:2:1) at _slicedToArray (slicedToArray.js:6:1) at Object.handleDateRangeChange [as onChange] (calendar-date-picker.tsx:29:65) at Object.eval [as onChange] (index.js:1:83471) at n.eval [as handleClick] (index.js:1:46211) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1) at executeDispatch (react-dom.development.js:9041:1)

To Reproduce Steps to reproduce the behavior:

just have the showTimeSelect attribute set to true with selectsRange and you should be able to reproduce it.

Expected behavior As stated, i get that error up above. I tried hooking it up with a single date one and it works just fine.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[kihyun0331]

@mention-to/author

I encountered the issue described in this thread and attempted to make some modifications to the code. However, I want to emphasize that my coding skills are not very advanced, and I cannot guarantee that the proposed changes will work flawlessly. Here is my attempt at a solution:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { setHours, setMinutes } from 'date-fns';

const MyDatePicker = () => {
  // Explanation of the changes:
  // When using showTimeSelect and selectsRange together in react-datepicker,
  // it's necessary to separate the initial date value into start and end.
  const [startDate, setStartDate] = useState(
    setHours(setMinutes(new Date(), 30), 16)
  );
  const [endDate, setEndDate] = useState(
    setHours(setMinutes(new Date(), 30), 17)
  );

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      showTimeSelect
      excludeTimes={[
        setHours(setMinutes(new Date(), 0), 17),
        setHours(setMinutes(new Date(), 30), 18),
        setHours(setMinutes(new Date(), 30), 19),
        setHours(setMinutes(new Date(), 30), 17),
      ]}
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

export default MyDatePicker;

I made these changes based on my understanding of the issue and the necessity to handle time selection in a range scenario. Please note that I'm not highly proficient in coding, and I can't assure that this modification is error-free. If you or others could test this modified code and provide feedback on whether it resolves the issue, that would be appreciated.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.