#Issue validating react-hook-form and react-date-picker with zod

4 messages · Page 1 of 1 (latest)

cursive pendant
#

Hey everyone, I’m trying to use react-datepicker with react-hook-form and zod.
I have properly registered the zodResolver which is working for other input fields, but I am not able to figure out how to properly register and get the respective schema error for the DatePicker.
I have tried placing the ´{...register(field.name, { valueAsDate: true })}´ inside DatePicker, but that will throw an error.
I am now making use of Controller from react-hook-form, which will allow validation to be made, but the error message shown is always “Required” (even without using register) instead of being the one I set inside my schema and that was working before I implemented react-date-picker.
Below you can find the relevant snipper for how I’m trying to implement it currently, does anyone know how I can properly set or customize an error message for this?

<Controller
              {...register(field.name, { valueAsDate: true })}
              control={form.control}
              name={field.name}
              rules={{ required: 'Date and Time are required' }}
              render={({ field: { onChange, value } }) => (
                <DatePicker
                  placeholderText="Enter date and time"
                  selected={value as Date}
                  onChange={onChange}
                  showTimeSelect
                  timeFormat="HH:mm"
                  timeIntervals={15}
                  timeCaption="time"
                  dateFormat="MMMM d, yyyy h:mm aa"
                  className={`text-center ${
                    errors[field.name] ? 'border-red-500' : ''
                  }`}
                />
              )}
            />
cursive pendant
#

Updating this with the latest try to fix it with ref and fieldstate.error, which still just returns the error "Required" when I try to submit the form without interacting with the DatePicker, instead of using the custom error message that I have set on the schema using zod.
Anyone knows what am I missing to use the proper error message?


            <Controller
              // TO-DO: Fix error message which shows only "Required"
              //{...register(field.name, { valueAsDate: true })}
              control={form.control}
              name={field.name}
              render={({ field: { onChange, value, ref }, fieldState }) => (
                <DatePicker
                  ref={ref}
                  placeholderText="Enter date and time"
                  excludeDateIntervals={[
                    { start: new Date(99999999999), end: new Date() },
                  ]}
                  selected={value as Date}
                  onChange={onChange}
                  showTimeSelect
                  timeFormat="HH:mm"
                  timeIntervals={15}
                  timeCaption="time"
                  dateFormat="MMMM d, yyyy h:mm aa"
                  className={`input-container-noflex text-center ${
                    fieldState.error ? 'border-red-500' : ''
                  }`}
                />
              )}
            />
cursive pendant
cursive pendant
#

On my end I still see this, what browser are you using?
Also, I just figured a way to fix this on my end, but it requires some changes, so I'm curious about how it is working fine on your side without those changes - maybe different browser behaviour?

print.png