Is it possible to use react-datepicker with react hooks forms?


Is it possible to use react-datepicker with react hooks forms? I tried following sample:


But with no luck.

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> ); }

Please take a look at the Controller doc: https://react-hook-form.com/api/#Controller

which we are maintaining a codesandbox example for hosting most the external components UI libs' implementations: 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" />



  • IntelliJ: How to use No Layout or Absolute Layout like Eclipse?
  • Inherit external java source in GWT project
  • How are you supposed to create Winston logger stream for Morgan in TypeScript
  • Emulate XMP tag with script tag and allow to copy content
  • /dev/kvm is not found on Mac OS
  • Apple AirLocation demo App ranging not shows beacons
  • How to adjust font size of text in a UIButton to fit the width programmatically in Swift?
  • pattern matching of the form: Option{..}
  • Python - Pass Arguments to Different Methods from Argparse
  • Null check vs Optional is present check
  • How do I Suppress Warnings in CheckStyle? [duplicate]
  • Added String to ArrayList not shown / not updated [duplicate]
  • Adobe Phonegap Push Notifications with Firebase Cloud on Android
  • Oracle: split string to rows
  • Set ClaimTypesRequested in Organizational Accounts On-Premises Federation
  • Symfony authentication with LDAP
  • Jenkins job DSL plugin - hidden parameter
  • Multi-users chat room data structure in Firebase Database
  • DocuSign API Replace template document but keep fields
  • Firebase suddenly reports invalid signature
  • Authorize Attribute Authentication with Postman in Web Api
  • Modifying native query cannot have named parameter bindings?
  • Adding native code to an existing Worklight hybrid app
  • Boolean filter using a timestamp value on a dataframe in Python
  • css: column-count 3, image floating spanning 2, chrome not playing. why?
  • Swift manually rotate view controller
  • Copy and paste data from multiple workbooks to a worksheet in another Workbook
  • xpath assertion failure with dynamic xpath
  • Multiplying polynomials/simplifying like terms
  • java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/SpringDispatcher-ser
  • using maven pom while creating jar:test-jar some times it says JAR will be empty - no content was ma
  • How to turn off notice reporting in xampp?
  • Android: Unable to detect vertical plane
  • Google App Engine Datastore: Dealing with eventual consistency
  • WPF custom control and direct content support
  • PHP Permalinks.. how to change?
  • Create/delete users from text file using Bash script
  • Time Complexity of Fibonacci Algorithm [duplicate]
  • How to check if object is null in Java?