¿Es posible usar react-datepicker con formularios de ganchos de reacción? Intenté la siguiente muestra:
https://codesandbox.io/s/awesome-shape-j0747?fontsize=14&hidenavigation=1&theme=dark
Pero sin suerte.
import React, { useState } from "react"; import "./styles.css"; import { useForm } from "react-hook-form"; import { Row, Col, Form, FormGroup, Label, Input, Button } from "reactstrap"; import DatePicker from "react-datepicker"; export default function App() { const { register, handleSubmit } = useForm(); const [startDate, setStartDate] = useState(); const [result, setResult] = useState(); const onSearch = event => { setResult(event); }; return ( <div className="App"> <Form onSubmit={handleSubmit(onSearch)}> <Row> <Col> <FormGroup> <Input type="number" name="account" id="account" placeholder="AccountId" innerRef={register({ required: true, maxLength: 20 })} /> </FormGroup> </Col> </Row> <Row> <Col> <DatePicker innerRef={register} name="datetime" className={"form-control"} selected={startDate} onChange={date => setStartDate(date)} showTimeSelect timeFormat="HH:mm" timeIntervals={15} timeCaption="time" dateFormat="MM-dd-yyyy h:mm" /> </Col> </Row> <Button>Submit</Button> </Form> <div>{JSON.stringify(result)}</div> </div> ); }Eche un vistazo al documento del controlador: https://react-hook-form.com/api/#Controller
el cual mantenemos un ejemplo de codesandbox para alojar la mayoría de las implementaciones de las librerías de interfaz de usuario de componentes externos: https://codesandbox.io/s/react-hook-form-controller-079xx
<Controller as={ReactDatePicker} control={control} valueName="selected" // DateSelect value's name is selected onChange={([selected]) => selected} name="ReactDatepicker" className="input" placeholderText="Select date" />EDITAR
con la última versión de react-hook-form, esta es la implementación del controlador usando render:
<Controller name={name} control={control} render={({ onChange, value }) => ( <DatePicker selected={value} onChange={onChange} /> )} />Con reaccionar-ganchos-formulario v7
importar dependencias:
import { Controller, useForm } from 'react-hook-form' import DatePicker from 'react-datepicker'agregue control al gancho useForm():
const { control, register, handleSubmit, ... } = useForm()Agregue el controlador y el componente DatePicker:
<Controller control={control} name='date-input' render={({ field }) => ( <DatePicker placeholderText='Select date' onChange={(date) => field.onChange(date)} selected={field.value} /> )} />Con reaccionar Material-UI
Al principio, tenga cuidado de haber envuelto su componente de aplicación con LocalizationProvider. Para mi caso fue moment library. https://mui.com/components/date-picker/
Y aquí está el componente reutilizable DatePickerAsController :)
import React from 'react'; import { Controller } from 'react-hook-form'; import { TextField, TextFieldProps } from '@mui/material'; import clsx from 'clsx'; import { DatePicker } from '@mui/lab'; import { Moment } from 'moment'; export interface DatePickerAsControllerProps { control: any; name: string; value: Moment; rules?: any; classes?: string[]; label: string; onChange: (date: Moment) => void; } export function DatePickerAsController(props: DatePickerAsControllerProps) { const { control, name, rules, classes, label, onChange, value } = props; const handleChange = (date: Moment, field: any) => { console.log(date); field.onChange(date); onChange(date); }; return ( <Controller control={control} name={name} rules={rules} render={({ field }) => ( <DatePicker label={label} value={value} onChange={(date: Moment) => handleChange(date, field)} renderInput={(params: TextFieldProps) => ( <TextField className={clsx(classes)} {...params} /> )} /> )} /> ); }