onesine
Return single Date-object when using asSingle-option
Thanks for a nice date picker :-)
I'm quite new to React and JS, so I apologize if I'm misunderstanding some general concepts by asking this question.
Context
My project uses a combination of react-hook-form and zod for handling forms and schema validation, and I'm looking to add this date picker to a form where I want the user to be able to select a single date using the asSingle-option.
This works and looks fine in the UI, but when I'm submitting my form I get an error as my schema expects a single Date-object to be returned and not an object containing startDate and endDate.
The only workaround I can find to handling this is to transform the returned value in my zod-schema before validating it, but I would like to keep this logic out of the schema and contain it within my date picker-component.
I tried setting the value-property of the date picker to a single Date-object but this seems to break it as it expects an object containing both startDate and endDate.
Questions
Is there any reason to not return just a single Date-object when using the asSingle-option? I think this would be a lot cleaner and play nicely with schema validation libraries such as zod.
Has anyone encountered similar issues using this date picker in conjunction with react-hook-form and zod? If so, can you share details on how you managed to work around them?
@t0m3k is there any to do this ? when the component asSingle the value should be a string, not an object !
For anyone looking for a workaround, this is what I came up with, and it seems to work fine. I think it's quite hacky, so I'd still appreciate if a permanent solution could be implemented.
First, wrap the Datepicker-component in a Controller that includes a transform-prop to be used in value and onChange:
function DateController({ control, transform, name, defaultValue }) {
return (
<Controller
defaultValue={defaultValue}
control={control}
name={name}
render={({ field: { onChange, value } }) => (
<Datepicker
asSingle
useRange={false}
value={transform.input(value)}
onChange={(e) => onChange(transform.output(e))}
/>
)}
/>
);
}
Then, for e.g. your DateInput-component, you would use the new controller like this:
const { control } = useFormContext();
<DateController
control={control}
name={props.name}
defaultValue={props.defaultValue}
transform={{
input: (dateValue) => ({
startDate: dateValue,
endDate: dateValue,
}),
output: (dateRange) => dateRange.startDate,
}}
/>
Hello! I didn't understand how a defaultValue should be in the last component you have write. Shouldn't the react-hook-form manage this?
