How to use Datepick of Mui with Formik

Hello Nico, Thank you for using Web-Brackets.com, you are using a different way to get the data onChange so the function which called  formik.handleChange doesn't work because somehow the event does not pass to handleChange so you do it in this way 

<DatePicker label="Departure Date" id="departureDate" name=departureDate value={formik.values.departureDate} onChange={(val) => { console.log(val); //val is the variable which contain the selected date //You can set it anywhere }} renderInput={(params) => <TextField {...params} />}/>

so the full code should looks like 

import React from "react";import { render } from "react-dom";import { useFormik } from "formik";import TextField from "@mui/material/TextField";import AdapterDateFns from "@mui/lab/AdapterDateFns";import LocalizationProvider from "@mui/lab/LocalizationProvider";import DatePicker from "@mui/lab/DatePicker";import "./style.css";export function App() { // A custom validation function. This must return an object // which keys are symmetrical to our values/initialValues const validate = (values) => { const errors = {}; return errors; }; const formik = useFormik({ initialValues: { departureDate: Date.now() }, validate, onSubmit: (values) => { alert(JSON.stringify(values, null, 2)); } }); return ( <div style={{ height: 400, width: "100%" }}> <form> <div className="form-group row"> <label for="departureDate" className="col-sm-7 col-form-label"> Departure Date </label> <div className="col-sm-5"> <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker label="Departure Date" id="departureDate" name=departureDate value={formik.values.departureDate} onChange={(val) => { console.log(val); //val is the variable which contain the selected date //You can set it anywhere }} renderInput={(params) => <TextField {...params} />} /> </LocalizationProvider> {formik.errors.departureDate ? ( <div>{formik.errors.departureDate}</div> ) : null} </div> </div> </form> </div> );}render(<App />, document.getElementById("root"));

this will not make an error when you select a date but the point is setting the value to the form you can do it using a function called setFieldValue and it should be use like this 

<LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker label="Departure Date" id="departureDate" name=departureDate value={formik.values.departureDate} onChange={(val) => { //val is the variable which contain the selected date //You can set it anywhere formik.setFieldValue('departureDate', val); }} renderInput={(params) => <TextField {...params} />} /></LocalizationProvider>{formik.errors.departureDate ? ( <div>{formik.errors.departureDate}</div>) : null}{console.log(formik.values.departureDate)}

Good luck

Thanks Mohamed for your kind help, I resolved the problem meanwhile and used the solution you adviced.
Your answer confirms that I took the right direction ! :)

The forum is good ! I posted my question to the github of formik and also of mui, no answer all day long, seems to be dead or dead slow…

To remind the full context

My code didn't work first because 

• the DateTime picker doesn't set the same type of data as in the initialValues.
• DateTime picker sends an object containing a property which is the date time in full string format.

so to fully resolve my problem i did use the same solution you advise:

1. in the onChange, we can use the formik object to trigger the SetFieldValue so we can correct the value sent to formik
2. Date.parse will be used so we can send to formik the same data type as in the initial value : number of milliseconds elapsed since January 1, 1970 00:00:00 UTC like the Date.now() used to initialise the departureDate
    

Date.parse(value) is the number of ms of the date selected, Date.now() is the number of ms of the current date.

 const formik = useFormik({ initialValues: { departureTime: Date.now(), }, validate, onSubmit: values => { alert(JSON.stringify(values, null, 2)); }, });<LocalizationProvider dateAdapter={AdapterDateFns}><DatePickerlabel="Departure Date" id="departureDate" name=departureDate value={formik.values.departureDate} onChange={(value) => { formik.setFieldValue('departureDate', Date.parse(value)); }}renderInput={(params) => <TextField {...params} />}/></LocalizationProvider>

Thank you verymuch both of you guys !! This post was the only one that helped me to resolve my problem with the data Picker and formik!! 

Thanks both guys! I had the same problem, I searched several forums but could't find the solution until now