My input and output should be ISO string (using react-hook-form and zod)

[princemuel]

Hi there. Please I'm using react-day-picker with react-hook-form and zod. My input and output should be ISO string. React-Day-Picker accepts the input as new Date(ISO-string) but is always returning the output as a date object instead of ISO-string. Please any ideas on how I can setup my zod schema to integrate with react-day-picker and properly convert the output? Thanks

[gpbl]

@princemuel, you can format a Date object as ISO string with toISOString().

Example:

<DayPicker 
  mode="single" 
  onSelect={ (date) => doSomething(date.toISOString() }
  selected=( parse(dateAsIsoString) }
/>

Also: better do not pass string to new Date(), as there are some caveats. Use the parse function from DateFns: https://date-fns.org/v2.30.0/docs/parse to get a Date object from your ISO string.

[gpbl]

Also, if you are using ISO Week Dates, remember to pass the ISOWeek prop:

https://react-day-picker.js.org/basics/localization#switching-to-iso-week-dates