I am using Material UI Date picker with day js,but the issue that arising again and again is,’when I select the date on calender,1st time it updates in textfield and then it is not working.And also having problem in Yup like when touched 1st time it gives error means works perfectly but when removing the date from text field and left the field blank it does not work.’
codesandbox Link : https://codesandbox.io/s/material-ui-datepicker-error-pdvt07
code:
JavaScript
x
381
381
1
import "./styles.css";
2
import React, { useState } from "react";
3
import {
4
TextField,
5
Container,
6
Typography,
7
Stack,
8
Button,
9
Box
10
} from "@mui/material";
11
import { Link } from "react-router-dom";
12
import { Helmet } from "react-helmet-async";
13
import { styled } from "@mui/material/styles";
14
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
15
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
16
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
17
import TodayIcon from "@mui/icons-material/Today";
18
import moment from "moment";
19
import dayjs from "dayjs";
20
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
21
import InputAdornment from "@mui/material/InputAdornment";
22
import Autocomplete from "react-google-autocomplete";
23
import { useFormik } from "formik";
24
import * as Yup from "yup";
25
// import useResponsive from "../../hooks/useResponsive";
26
27
export default function App() {
28
// const navigate = useNavigate();
29
const validationSchema = Yup.object().shape({
30
firstName: Yup.string().required("First Name is required"),
31
lastName: Yup.string()
32
// .length(3, 'Last Name must be greater than 3 characters')
33
.required("Last Name is required"),
34
email: Yup.string()
35
.email("Invalid email")
36
.required("Please enter your email"),
37
mobile: Yup.string()
38
.length(10, "Mobile Number must be 10 digit")
39
.required("Mobile Number is required"),
40
dob: Yup.string().required("Dob is required"),
41
passingYear: Yup.string().required("Passing out year is required"),
42
location: Yup.string().required("Location is required"),
43
occupation: Yup.string().required("Occupation is required"),
44
address: Yup.string().required("Addres is required")
45
});
46
const formik = useFormik({
47
initialValues: {
48
firstName: "",
49
lastName: "",
50
email: "",
51
mobile: "",
52
dob: "",
53
passingYear: "",
54
location: "",
55
address: "",
56
occupation: ""
57
},
58
validationSchema,
59
onSubmit: (values) => {
60
console.log(values);
61
// navigate(`/verify-otp?email=${values.email}`, { replace: true });
62
}
63
});
64
65
return (
66
<div className="App">
67
<form onSubmit={formik.handleSubmit}>
68
<Stack direction={"column"} spacing={3}>
69
<Box>
70
<TextField
71
sx={{
72
width: "100%"
73
}}
74
id="outlined-firstName-input"
75
label="First Name"
76
name="firstName"
77
type={"text"}
78
onChange={formik.handleChange}
79
value={formik.values.firstName}
80
onBlur={formik.handleBlur}
81
autoComplete="off"
82
/>
83
{formik.touched.firstName && formik.errors.firstName && (
84
<p
85
style={{
86
color: "red",
87
marginTop: "5px",
88
marginBottom: "-15px"
89
}}
90
>
91
{formik.errors.firstName}
92
</p>
93
)}
94
</Box>
95
96
<Box>
97
<TextField
98
sx={{
99
width: "100%"
100
}}
101
id="outlined-lastName-input"
102
label="Last Name"
103
name="lastName"
104
type={"text"}
105
onChange={formik.handleChange}
106
value={formik.values.lastName}
107
onBlur={formik.handleBlur}
108
autoComplete="off"
109
/>
110
{formik.touched.lastName && formik.errors.lastName && (
111
<p
112
style={{
113
color: "red",
114
marginTop: "5px",
115
marginBottom: "-15px"
116
}}
117
>
118
{formik.errors.lastName}
119
</p>
120
)}
121
</Box>
122
123
<Box>
124
<TextField
125
sx={{
126
width: "100%"
127
}}
128
id="outlined-email-input"
129
label="Email address"
130
name="email"
131
type={"email"}
132
onChange={formik.handleChange}
133
value={formik.values.email}
134
onBlur={formik.handleBlur}
135
/>
136
{formik.touched.email && formik.errors.email && (
137
<p
138
style={{
139
color: "red",
140
marginTop: "5px",
141
marginBottom: "-15px"
142
}}
143
>
144
{formik.errors.email}
145
</p>
146
)}
147
</Box>
148
149
<Box>
150
<TextField
151
sx={{
152
width: "100%"
153
}}
154
InputProps={{
155
startAdornment: (
156
<InputAdornment position="start">+91</InputAdornment>
157
)
158
}}
159
id="outlined-mobile-input"
160
label="Mobile Number"
161
type="tel"
162
name="mobile"
163
onChange={formik.handleChange}
164
value={formik.values.mobile}
165
onBlur={formik.handleBlur}
166
autoComplete="off"
167
/>
168
{formik.touched.mobile && formik.errors.mobile && (
169
<p
170
style={{
171
color: "red",
172
marginTop: "5px",
173
marginBottom: "-15px"
174
}}
175
>
176
{formik.errors.mobile}
177
</p>
178
)}
179
</Box>
180
181
<Box
182
sx={{
183
width: "100%"
184
}}
185
>
186
<LocalizationProvider dateAdapter={AdapterDayjs}>
187
<DesktopDatePicker
188
label="Date of birth"
189
inputFormat="DD/MM/YYYY"
190
value={dayjs(formik.values?.dob).format("DD-MM-YYYY") || ""}
191
onChange={(newValue) => {
192
formik.setFieldValue(
193
"dob",
194
dayjs(newValue).format("DD-MM-YYYY")
195
);
196
formik.setFieldTouched("dob", true);
197
}}
198
renderInput={(params) => (
199
<TextField
200
sx={{
201
width: "100%"
202
}}
203
{params}
204
name="dob"
205
onBlur={formik.handleBlur}
206
error={formik.errors.dob && formik.touched.dob}
207
/>
208
)}
209
/>
210
</LocalizationProvider>
211
{formik.touched.dob && formik.errors.dob && (
212
<p
213
style={{
214
color: "red",
215
marginTop: "5px",
216
marginBottom: "-15px"
217
}}
218
>
219
{formik.errors.dob}
220
</p>
221
)}
222
</Box>
223
224
<Box
225
sx={{
226
width: "100%"
227
}}
228
>
229
<LocalizationProvider dateAdapter={AdapterDayjs}>
230
<DatePicker
231
views={["year"]}
232
label="Passing year"
233
maxDate={dayjs().subtract(1, "year")}
234
value={formik.values.passingYear || ""}
235
onBlur={formik.handleBlur}
236
onChange={(newValue) => {
237
formik.setFieldValue("passingYear", newValue?.format("YYYY"));
238
}}
239
renderInput={(params) => (
240
<TextField
241
sx={{
242
width: "100%"
243
}}
244
{params}
245
name="passingYear"
246
onBlur={formik.handleBlur}
247
error={
248
formik.errors.passingYear && formik.touched.passingYear
249
}
250
/>
251
)}
252
/>
253
254
{formik.touched.passingYear && formik.errors.passingYear && (
255
<p
256
style={{
257
color: "red",
258
marginTop: "5px",
259
marginBottom: "-15px"
260
}}
261
>
262
{formik.errors.passingYear}
263
</p>
264
)}
265
</LocalizationProvider>
266
</Box>
267
268
<Box>
269
<TextField
270
sx={{
271
width: "100%"
272
}}
273
id="outlined-occupation-input"
274
label="Occupation"
275
name="occupation"
276
type={"text"}
277
onChange={formik.handleChange}
278
value={formik.values.occupation}
279
onBlur={formik.handleBlur}
280
autoComplete="off"
281
/>
282
{formik.touched.occupation && formik.errors.occupation && (
283
<p
284
style={{
285
color: "red",
286
marginTop: "5px",
287
marginBottom: "-15px"
288
}}
289
>
290
{formik.errors.occupation}
291
</p>
292
)}
293
</Box>
294
295
<Box>
296
<Autocomplete
297
className="location"
298
style={{
299
width: "100%",
300
paddingLeft: "13px",
301
height: "8vh",
302
border: "1px solid rgb(224,224,224)",
303
borderRadius: "6px",
304
fontSize: "17px",
305
fontWeight: "500",
306
color: "#212B36",
307
backgroundColor: "#F9FAFB",
308
"&:focus": {
309
borderWidth: "2px",
310
borderColor: "darken(#2f8f1f, 5%)",
311
fontSize: "20px"
312
}
313
}}
314
apiKey={"AIzaSyABX4LTqTLQGg_b3jFOH8Z6_H5CDqn8tbc"}
315
onPlaceSelected={(place) => {
316
formik.setFieldValue("location", place?.formatted_address);
317
}}
318
types={["address"]}
319
componentRestrictions={{ country: "us" }}
320
name="location"
321
onChange={formik.handleChange}
322
onBlur={formik.handleBlur}
323
/>
324
{formik.touched.location && formik.errors.location && (
325
<p
326
style={{
327
color: "red",
328
marginTop: "5px",
329
marginBottom: "-15px"
330
}}
331
>
332
{formik.errors.location}
333
</p>
334
)}
335
</Box>
336
337
<Box
338
sx={{
339
width: "100%"
340
}}
341
>
342
<TextField
343
sx={{
344
width: "100%"
345
}}
346
id="outlined-password-input"
347
label="Addres"
348
name="address"
349
value={formik.values.address}
350
onChange={formik.handleChange}
351
onBlur={formik.handleBlur}
352
type="text"
353
multiline
354
rows={4}
355
maxRows={6}
356
autoComplete="off"
357
/>
358
{formik.touched.address && formik.errors.address && (
359
<p
360
style={{
361
color: "red",
362
marginTop: "5px",
363
marginBottom: "-15px"
364
}}
365
>
366
{formik.errors.address}
367
</p>
368
)}
369
</Box>
370
371
<Box ml={"auto"}>
372
<Button fullWidth size="large" type="submit" variant="contained">
373
Sign Up
374
</Button>
375
</Box>
376
</Stack>
377
</form>
378
</div>
379
);
380
}
381
Thanks in advance…..
Advertisement
Answer
you need to use dayjs format when trying to display the date. the date picker already formats the date for you in the textfield.
JavaScript
1
24
24
1
<DesktopDatePicker
2
label="Date of birth"
3
inputFormat="DD/MM/YYYY"
4
value={formik.values?.dob}
5
onChange={(newValue) => {
6
formik.setFieldValue(
7
"dob",
8
newValue
9
);
10
formik.setFieldTouched("dob", true);
11
}}
12
renderInput={(params) => (
13
<TextField
14
sx={{
15
width: "100%"
16
}}
17
{params}
18
name="dob"
19
onBlur={formik.handleBlur}
20
error={formik.errors.dob && formik.touched.dob}
21
/>
22
)}
23
/>
24