2

I have a component that receive date from the backend as a string in dd/MM/yyyy format. I pass this date to my MaterialUI datepicker component, but it converts it into MM/dd/yyyy , is there a way i can control this conversion, rather than have a dummy variable to perform the tranformation

   function MainForm3() {
    const initialValues = {dob: '12/09/2020'}
    return (<Formik initialValues={initialValues}>
    { formik => {
            return (
                <>
                    <myDatePicker name={"dob"} label={"Date of birth"} />
                </>

            )}}
</Formik >)}

     function myDatePicker(props: any) {
     const [field] = useField(props);

    return (
                 <MuiPickersUtilsProvider utils={DateFnsUtils}  >
                             <KeyboardDatePicker
                                fullWidth
                                InputProps={}
                                label={label}
                                placeholder={label}
                                {...field}
                                variant="inline"
                                inputVariant="outlined"
                                format="dd/MM/yyyy"
                                autoOk={true}
                              
                            />

                        </MuiPickersUtilsProvider>
             )}

The on intial load the date in the text field shows it in MM/dd/yyyy format. WHen i click on the picker and and select the date it shows correctly in dd/MM/yyyy format as i have specified the same format on the format attribute.

How do i control the date format of the date that is loaded initially into the picker

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
onlinejava
  • 163
  • 1
  • 4
  • 14

0 Answers0