The code mentioned in the section "Input with Date Picker Dialog" throws an error

[karansethia]

link => https://react-day-picker.js.org/advanced-guides/input-fields


re-writing the onSelect prop worked our for me

<DayPicker
initialFocus
mode="single"
selected={selectedDate}
onSelect={(date) => handleSelect(date as Date)}
/>

Im not sure if this is the correct way and if there is a correct way to pass handleSelect function to onSelect prop please, update the docs

[gpbl]

Thanks, there was a bug indeed in the docs. See https://react-day-picker.js.org/advanced-guides/input-fields#input-with-inline-calendar

[karansethia]

Happy to help, also since shadcn is also using your package, I dont know what the formal way to request is but I would love to see docs updated with how to use this component with react-hook-form.
I created a seperate component for date input, had to sync it with refs using forwardRef and the actual code of form would look like this

const Form = () => {
const {register, handleSubmit, setValue, watch} = useForm({
defaultValues: {
name: "Karan Sethia",
age: 23,
birthdate: "01/01/2000",
},
});

const onSubmit = (data: FormData) => {
console.log(data);
};

//we use this watch from RHF to track the date
const birthdate = watch("birthdate");

return (

Name
<input id="name" {...register("name")} placeholder="Enter your name" />

Age
<input
type="number"
id="age"
{...register("age")}
placeholder="Enter your age"
/>

Birthdate
<DateInput
value={birthdate}
onChange={(e) => setValue("birthdate", e.target.value)}
wrapperClass="my-2"
placeholder="MM/DD/YYYY"
/>

Submit

);
};

Now in the actuall app im working on there are 8 date inputs and having to declare a variable for each seperately is sort of hassle.
I would love to see the component work out of the box with RHF and maybe other libraries