First of all make sure you are using the latest version of the plugin (2.0.0). Then you need to also install the date-fns module, but for the moment the react-datepicker is working with the 2.0.0-alpha.23 version. Then you need to import and register the locale you want and finally add the locale property to the … Read more
With react-hooks-form v7 import dependencies: import { Controller, useForm } from ‘react-hook-form’ import DatePicker from ‘react-datepicker’ add control to the useForm() hook: const { control, register, handleSubmit, … } = useForm() Add the Controller and DatePicker component: <Controller control={control} name=”date-input” render={({ field }) => ( <DatePicker placeholderText=”Select date” onChange={(date) => field.onChange(date)} selected={field.value} /> )} />
Update to Dani Vijay’s answer. This uses useField and useFormikContext from Formik v2, to simplify usage of the component. DatePicker.jsx: import React from “react”; import { useField, useFormikContext } from “formik”; import DatePicker from “react-datepicker”; export const DatePickerField = ({ …props }) => { const { setFieldValue } = useFormikContext(); const [field] = useField(props); return … Read more