How to handle datetime-local inputs #738
Replies: 2 comments 2 replies
-
I can see why you struggle. I think A less ideal but simple approach is to make yourself a simple util like export function serializeDateTime(date: Date): string {
// ...
}
export default function Example() {
const [form, fields] = useForm({
constraint: getZodConstraint(schema),
defaultValue: {
// serialize the value before passing to conform
date: serializeDateTime(new Date(0)),
},
onValidate(context) {
return parseWithZod(context.formData, { schema });
},
shouldRevalidate: "onInput",
shouldValidate: "onBlur",
});
return (
<Form {...getFormProps(form)} method="POST">
<input
{...getInputProps(fields.date, {
type: "datetime-local",
})}
/>
<button
{...form.update.getButtonProps({
name: fields.date.name,
// serialize the value before passing to conform..
value: serializeDateTime(new Date(0))
})}
>
Update date
</button>
</Form>
);
} |
Beta Was this translation helpful? Give feedback.
-
@edmundhung on second thought, the value parsing conform does might be better if I could pull it out, I'm gonna send you a schema on discord for review. but basically because of how I've defined a schema, boolean values are improperly serialized. |
Beta Was this translation helpful? Give feedback.
-
@edmundhung curious to get your take on this.
I'm currently struggling with understanding how to handle datetime-local values
with datetime-local it consumes a ISO8601 date without the
Z
at the end of itbased off my understanding, getInputProps may not be the right place for it because we're transforming values and we can't be 100% sure that people would be passing a full ISO8601 datetime, in my application that's what we use, but in order to allow anyone with whatever they might need it should be general
my question to you is how would you handle something like this and at which boundary would you have some logic like this in the pipeline of input/outputs
Beta Was this translation helpful? Give feedback.
All reactions