Help! handling datetime-local in redwood form?


I trying to build a form that has a datetime field so users can easily select a day and a time for events. I love the redwood forms so I was trying to use that for this feature. I found that if I set a prop of type="datetime-local" the browser will render a datetime-local date picker! awesome!

however, when I submit my form I get an error:
Expected type DateTime. DateTime cannot represent an invalid date-time-string 2020-04-23T19:00.

if I set this field back to standard text input and just type in the date in ISO format with seconds and a time zone then I don’t have an error. ex: 2020-04-23T19:00:00.000Z

Any ideas on how I can get this form to submit in the right format? I’m trying to figure out if I can use something like .toISOString() before the form is submitted, but maybe I’m barking up the wrong tree with that.

Ugh, Javascript and DateTime…you’re in for a tough journey. haha

Where does that error come from? From the server when trying to submit? Like you say, you could try transforming it somehow in your onSubmit handler before calling the mutation.

1 Like

OH no! now I’m scared of all of the date-related things I will need to figure out for this project :grimacing:

Thanks for the validation on my idea, and pointing me in the right direction on transforming it in onSubmit. The error was coming from the server, this is how I solved the issue:

  const onSubmit = (data) => {
    let date = new Date(data.when)
    data.when = date
    props.onSave(data, props?.event?.id)