According to the documentation I have to use useMemo to avoid the Time Picker closing after clicking it. https://github.com/haoxins/react-flatpickr?tab=readme-ov-file#the-date-picker-closes-after-a-value-is-selected
This is the code I used:
const options = useMemo(() => ({
enableTime: true,
dateFormat: "H:i",
no_calendar: true,
time_24hr: true,
closeOnSelect: false,
allowInput: true,
clickOpens: true,
onOpen: handleOnOpen,
}), [handleOnOpen]);
const handleOnOpen = useCallback(() => {
console.log("flatpickr opened");
}, []);
const handleChangeStartTime = useCallback((selectedDateTimes) => {
setSelectedStartTime(selectedDateTimes[0] ?? null);
}, []);
<Flatpickr
value={selectedStartTime}
onChange={handleChangeStartTime}
options={options}
className="form-control"
placeholder="Select time"
/>
However I'm getting the following error:
Uncaught ReferenceError: Cannot access 'Dn' before initialization
at aV (index-Cgr2_jSC.js:159:51311)
at Jh (index-Cgr2_jSC.js:48:34156)
at vm (index-Cgr2_jSC.js:48:62404)
at xw (index-Cgr2_jSC.js:48:72914)
at e0 (index-Cgr2_jSC.js:48:106969)
at ax (index-Cgr2_jSC.js:48:106034)
at Im (index-Cgr2_jSC.js:48:105866)
at Kw (index-Cgr2_jSC.js:48:102970)
at h0 (index-Cgr2_jSC.js:48:114435)
at MessagePort.Ce (index-Cgr2_jSC.js:25:1648)
I'm using react-flatpickr@4.0.11 and flatpickr@4.6.13.
According to the documentation I have to use useMemo to avoid the Time Picker closing after clicking it. https://github.com/haoxins/react-flatpickr?tab=readme-ov-file#the-date-picker-closes-after-a-value-is-selected
This is the code I used:
However I'm getting the following error:
I'm using react-flatpickr@4.0.11 and flatpickr@4.6.13.