nicoclau
commented
2 years ago i resolved the problem, ok i share it , it can be useful.
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.
in the onChange, we can use the formik object to trigger the SetFieldValue so we can correct the value sent to formik 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}>
<DatePicker
label="Departure Date"
id="departureDate"
name="departureDate"
value={formik.values.departureDate}
onChange={(value) => {
formik.setFieldValue('departureDate', Date.parse(value));
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
webuxmotion
Duplicates
Latest version
Current behavior 😯
When we use datepicker with formik it fails because formik expect a string.
How can we set datepicker to return a string as the selected value?
Please find a sample:
https://codesandbox.io/s/formik-codesandbox-template-forked-xonzi?file=/index.js
The error is returned when we pick a date
Expected behavior 🤔
We should be able to select the date with formik
Steps to reproduce 🕹
Steps:
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System: OS: Windows 10 10.0.19043 Binaries: Node: 16.9.0 - C:\Program Files (x86)\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.4 - C:\Program Files (x86)\nodejs\npm.CMD Browsers: Chrome: 98.0.4758.82 Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.50) npmPackages: @emotion/react: ^11.7.1 => 11.7.1 @emotion/styled: ^11.6.0 => 11.6.0 @mui/lab: ^5.0.0-alpha.68 => 5.0.0-alpha.68 @mui/utils: 5.3.0 @mui/x-data-grid: ^5.5.0 => 5.5.0 @types/react: 17.0.38 react: ^16.0.0 => 16.14.0 react-dom: ^16.0.0 => 16.14.0 typescript: ^3.9.10 => 3.9.10