Entiendo cómo usar el Controller de react-hook-form para crear una entrada.

 import styles from './index.module.css' import { Controller } from 'react-hook-form' export default function InputField({ label, placeholder, type, value, inputId, control, name, ...props }) { return ( <div className={styles.field}> <label htmlFor={inputId} className={styles.label}>{label}</label> <Controller name={name} control={control} render={({ field }) => <input id={inputId} {...field} className={styles.input} placeholder={placeholder} />} /> </div> ) }

Sin embargo, ¿cómo se crea un "campo de fecha", que tiene un cuadro de selección para el mes, el día y el año? En teoría, queremos que el formulario escupa un objeto de fecha JSON, que se ve así:

 JSON.stringify(new Date) '"2021-11-04T06:47:07.567Z"'

Así que queremos que handleSubmit reciba { "aDateField": "2021-11-04T06:47:07.567Z" } algo así. Pero la implementación del Controller son 3 cuadros de selección, que pueden tener un nombre similar a aDateField[month] , aDateField[day] y aDateField[year] o pueden no tener ningún nombre, ya que no se utilizan en la salida final de JSON. . ¿Cómo se hace esto con forma de gancho de reacción?

La arquitectura del HTML será realmente 2 cuadros de selección y una entrada (para el año, por lo que no tiene que desplazarse potencialmente por miles de años, desde el 2000 a. C.).

 <select> <option>Month...</option> <option value="0">January</option> <option value="1">February</option> ... </select> <select> <option>Day...</option> <option value="0">1</option> <option value="1">2</option> ... </select> <input name="year" />

Estoy confundido en cuanto a cómo serializar correctamente las subentradas en un valor JSON de salida final, siguiendo el paradigma de forma de gancho de reacción de Control .

Para mantenerlo simple, también podría usar 3 entradas de texto para los valores en lugar de cuadros de selección por ahora.