React-date-picker: Uncaught Error: Failed to get month from date: 2020-09-22T05:00:00.000Z.

[RubberChickenParadise]

I am using local storage to store some form data for caching between reloads. The date is stored into the local storage as 2020-09-25T05:00:00.000Z (local storage json {"hasValue":true,"processed":{"start":"2020-09-25T05:00:00.000Z"}} JSX <DatePicker minDate={new Date('2000-01-01')} format="M/d/yyyy" value={state.processed?.start} onChange={e => dispatch({ type: 'processedFrom', payload: e })} />

The initial load works but when trying to open the calendar by clicking on the input the following error is thrown

Uncaught Error: Failed to get month from date: 2020-09-25T05:00:00.000Z.
    at getMonth (index.js:64)
    at getDayStart (index.js:272)
    at index.js:21
    at Array.map (<anonymous>)
    at makeGetRangeInternal (index.js:20)
    at getRange (dates.js:269)
    at getTileClasses (utils.js:102)
    at TileGroup (TileGroup.js:41)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at discreteUpdates$1 (react-dom.development.js:21893)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Additional:

storage is handled by the following hook:

export const usePersistedReducer = (key, reducer, defaultValue)=> {
  const [state, dispatch] = useReducer(reducer, defaultValue, (val) => JSON.parse(localStorage.getItem(key)) || defaultValue);
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);
  return [state, dispatch];
}

when local storage is empty the component functions just fine till refresh tries to set the value as the moment string

[RubberChickenParadise]

I am not a type script developer but believe the following in the renderCalendar() function of DatePicker.jsx just before the return would fix the issue

const dateValue = typeof value === "string" ? new Date(value) : value;

There may be a better way to handle this though so I'll wait to see if someone picks this up.

[mzalevski]

same problem

[wojtekmaj]

Pass value as Date, not as string. This will fix the issue.

[RubberChickenParadise]

@wojtekmaj I have the date as a date, then store the object to local storage in the browser using json.stringify to get the json string. On page refresh pull the object from local storage and deserialize the json string into state.

const obj = { date: new Date('2020','03','01')}
const str = JSON.stringify(obj)
const retreivedObj = JSON.parse(str)

The date is then a string and not a date leading to the error when passing the parsed date to the control.

[RubberChickenParadise]

Sorry: was on mobile and hit the close with comment button

[wojtekmaj]

You will need a smarter way to deserialize your JSON or simply transform value to Date() at the very last moment: at the moment of passing it to props.