Open austinjones-niantic opened 10 months ago
@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.
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.
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):
Smartphone (please complete the following information):
Additional context Add any other context about the problem here.