How to set default date for value as date?

[apoorvmote]

<input 
  type="date" 
  id="date" 
  {...register("date", {
    valueAsDate: true,
  })}
  defaultValue={new Date()}
    />

How do I set todays date as default value for date field?

The above code has error on line default value

[jorisre]

The date format for value and defaultValue should be YYYY-MM-DD

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/date#value

[apoorvmote]

If someone else has same problem then correct answer really is
defaultValue={new Date().toISOString().subStr(0, 10)}
But thanks for the direction.

[chiloanemike]

defaultValue={new Date().toISOString().substring(0, 10)}
subStr() has been replaced

[KATT]

This feels very iffy, but I have this hack:

function isValidDate(date: Date) {
  return !isNaN(date.getTime());
}

type Maybe<T> = T | undefined | null;

/**
 * Create a date YYYY-MM-DD date string that is typecasted as a `Date`.
 * Hack when using `defaultValues` in `react-hook-form`
 * This is because `react-hook-form` doesn't support `defaultValue` of type `Date` even if the types say so
 */
export function dateToInputDate(date: Maybe<Date>) {
  if (!date || !isValidDate(date)) {
    return undefined;
  }
  return date.toJSON().slice(0, 10) as unknown as Date;
}

[Krish120003]

Is this still the best way to do this? Feels like a very hacky solution.

[Azazeel]

Thank you for this, much appreciated. However, the 'Maybe' type is missing in this example:

type Maybe<T> = NonNullable<T> | undefined;

(found here: https://non-traditional.dev/the-power-of-maybe-in-typescript)

[KATT]

updated my snippet 👍

[kervensorima]

1. step 1 converte the value receive to date
   export const formatDateForInput = (originalTimestamp: any) => {
   // values?.date_of_birth.toISOString().substring(0, 10)
   const dateOnly = new Date(originalTimestamp).toISOString().split('T')[0];
   return dateOnly;
   }

// step 2) and use the default in the register from ther form
Date de naissance*
<input
id="date_of_birth"
// defaultValue={new Date()?.toISOString()?.substring(0, 10)}
// value={new Date(form?.getValues("date_of_birth")?.toISOString().substring(0,10).toString())?.toISOString()?.substring(0, 10)}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
{...form.register("date_of_birth", {
valueAsDate: true,
setValueAs: v => new Date(v),
value: form?.getValues("date_of_birth"),
})}
placeholder='dd-MM-yyyy'
/>
{form?.formState?.errors?.date_of_birth?.message && (

{form.formState.errors?.date_of_birth.message.toString()}

)}