Incorrect serialization of zod objects with complex types (transform, refine,...)

[Tom-DK]

Hi there,

I'm working with complex dates, because our app requires timezone dependent functionality.

So I have custom transformations like this one:
startDate: z.string().transform(date => DateTime.fromFormat(date, 'yyyy-MM-dd')),

Expected scenario

startDate is serialized like: '2025-01-01'

What actually happens

Transformation already runs on the client side and calls the toString() function of DateTime leading to a serialized string value of "2025-01-01T00:00:00+1"

Zod makes a distinction between input and output types, the transformation should only occur on the backend. React-hook-forms supports this like this: https://github.com/orgs/react-hook-form/discussions/8496#discussioncomment-8800129

[axieum]

Did you ever find a neat way around this?

z.coerce.date<string>().transform(date => format(date, 'yyyy-MM-dd'))

This raises some type errors later on, especially when trying to use shadcn/ui's date picker which expects the react-hook-form field value to be Date | undefined, but the backend requires a string.

[Tom-DK]

Did you ever find a neat way around this?

z.coerce.date().transform(date => format(date, 'yyyy-MM-dd'))
This raises some type errors later on, especially when trying to use shadcn/ui's date picker which expects the react-hook-form field value to be Date | undefined, but the backend requires a string.

Nope unfortunately not, I ended up just parsing it as a regular string and in the back-end doing the transformation. I didn't have time to test whether this approach was compatible with remix-hook-form.

[axieum]

This monstrosity works -

endDate: z.coerce
    .date<string>()
    .transform((date) => format(date, 'yyyy-MM-dd'))
    .nullish()
    .default(null), // remove this line if you don't want `endDate` included at all in the payload

And then using gpbl/react-day-picker -

<Calendar
  mode="single"
  selected={field.value ? new Date(field.value) : undefined}
  onSelect={field.onChange}
  captionLayout="dropdown"
/>

😆