Open
Description
After updating to React v.18 we started to get "Invalid date provided" warnings in the console. The warnings disappear when we remove StrictMode. We are using a custom formatDate
function that uses the Intl.DateTimeFormat
to format the date. It seems that during the second render the preloadedDate
value is the formatted value and not the value that we provide to the component.
I've made an example here: https://codesandbox.io/p/sandbox/serverless-violet-8xnj43
const getFormatDate = () => {
const o = new Intl.DateTimeFormat([], { dateStyle: "short" });
return (date) => o.format(date);
};
export default function App() {
const [value, setValue] = useState(new Date("2024-10-21T22:00:00.000Z"));
const options = {
formatDate: getFormatDate(),
};
return (
<>
<Flatpickr
options={options}
onChange={([date]) => setValue(date)}
value={value}
render={({ value }, ref) => (
<input
ref={ref}
readOnly
value={value instanceof Date ? value.toISOString() : value ?? ""}
/>
)}
></Flatpickr>
</>
);
}
I'm not sure if there is something wrong with the way we have implemented it or if this is an actual issue. Any help is appreciated!
Metadata
Assignees
Labels
No labels