defaultValues that contains a date is not rendering in input

[kiwiinlondon]

I am quite new to react and javascript so please excuse me if this is a bit of a rudimentary question or whether in fact this is a bug.

The simplified code is below or can be seen at https://codesandbox.io/s/react-form-date-issue-327fh?file=/src/App.tsx:48-63

import React from 'react';
import ReactDOM from 'react-dom';
import { useForm } from "react-hook-form";

type Person = {
  firstname :string;
  lastname :string;
  dob : Date;
  }

const App = (person: Person) => {

  const { register, handleSubmit } = useForm<Person>( {defaultValues: person});
  
  const onSubmit = handleSubmit((data) => {
    alert(JSON.stringify(data))
  })

  return (    
    <form onSubmit={onSubmit}>
      <input {...register("firstname", {required : 'Required'})} id = "firstname" type="text"/>
      <input {...register("lastname", {required : 'Required'})} id = "lastname" type="text"/>
      <input {...register("dob", {required : 'Required'})} id = "dob" type="date"/>      
      <input type="submit" />
    </form>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App firstname = "Joe" lastname = "Blogs" dob = {new Date(2002,12,31)} />
  </React.StrictMode>,
  document.getElementById('root')
);

This gives me the following form which is prepopulated except for the dd/mm/yyyy enter image description here

The problem I have is

I have a simple react hook form that uses a type which is used by useForm. In this case its called Person
This form will be populated with defaultvalues that are retrieved from an API.
The type that this form uses has a date in it and I have no control over the object passed in.
When the date is set as part of the defaultvalues in the useForm it is not rendered and all I get is dd/mm/yyyy
When I submit the form the correct value is submitted
My question is how do I get the dob date box to display the underlying date rather than dd/mm/yyyy?

I can change the dob input to be of type text rather than date and the correct value is displayed but then there is of course no validation of the date or a date picker

Rather than passing in the type to defaultValues of useform I have also tried passing in a defaultValue to each of the inputs. This renders the date correctly (if i output the date to a string of correct format) but I would rather not have to set the defaultValue on each input as the type I am actually using is quite large and I thought it was quite nice just to bind the one object

<input {...register("dob", {required : 'Required'})} id = "lastname" type="date" defaultValue = {person.dob.toISOString().substr(0, 10)}/>  

I know that a input of date requires the defaultvalue to be a text value. However, if I set the default value using defaultvalues in useForm I have no control over how the Input is initialised

Any help would be greatly appreciated

[fahadsohail482]

Method 1:
@kiwiinlondon you may want to use the reset() function from useform() on mount and set your values as you want. This way you have full control over the values you set to the form.
Here is the snippet on how you can do it.

Working CodeSandBox here.

Method 2:
you can use setValue() function the similar way but its for the single value use setValue("name","value").

I would prefer you the 1st method. Hoping that it would help you.

[tan00001]

This does not work in TypeScript. You cannot assign a string to a Date.

[RobJJ]

I've run into a similar problem and would rather not convert the type to a string - this would then affect my zod validation. Anyone have a different solution for this problem?

[kiwiinlondon]

Thanks for your suggestion @fahadsohail482. However, to do that I would still have to change the type of the dob from Date to any. What if I dont have control over the Person object?

[fahadsohail482]

@kiwiinlondon You will always have control over the props or the data you are fetching from remote. You can change/modify or format as per your liking.
You don't need to use any type.

This component is expecting a Date but your useForm() is expecting a string see updated code sandbox

[tan00001]

Blame it on string types is not the answer. If the variable is a Date, convert it to a Date. It is not rock science. Why all the excuse for not handling as a Date? You already have an option "valueAsDate", yet when it comes in as a Date, you don't display it. That is just lame.

[kiwiinlondon]

Thanks @fahadsohail482. I can work with that.

Excuse me if this is a basic question but is there a reason that react-hook-form could not not take care of this in the background?
I am just just starting with React and Javascript, having come from a strongly typed lanaguage background, so would have thought if I had a date on an object and was rendering that object the date would just work

[fahadsohail482]

@kiwiinlondon The library does not genuinely anticipate what the user desires. So it provide the utility functions to do stuff.
For Date it has the special case you can read here.

[kiwiinlondon]

Thanks @fahadsohail482. I suspected that was the answer