1

I'm using the following Material-UI datepicker library:

import React from 'react'
import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import moment from 'moment';

    export default function DatePicker(props) {
    
        const { name, label, value, onChange } = props
    
    
        const convertToDefEventPara = (name, value) => ({
            target: {
                name, value
            }
        })
    
        return (
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker disableToolbar variant="inline" inputVariant="outlined"
                    label={label}
                    format="dd/MM/yyyy"
                    placeholder="DD/MM/YYYY"
                    name={name}
                    value={value}
                    onChange={date =>onChange(convertToDefEventPara(name,date))}                
    
                />
            </MuiPickersUtilsProvider>
        )
    }

Here is the handleInputChange implementation that exists within useFrom that I am using within my below component where I'm using DatePicker

    import React, { useState } from 'react'
    import { makeStyles } from "@material-ui/core";
    
        export function useForm(initialFValues, validateOnChange = false, validate) {
        
        
            const [values, setValues] = useState(initialFValues);
            const [errors, setErrors] = useState({});
        
            const handleInputChange = e => {
                const { name, value } = e.target
                setValues({
                    ...values,
                    [name]: value
                })
                if (validateOnChange)
                    validate({ [name]: value })
            }
        
            const resetForm = () => {
                setValues(initialFValues);
                setErrors({})
            }
        
        
            return {
                values,
                setValues,
                errors,
                setErrors,
                handleInputChange,
                resetForm
        
            }
        }


const useStyles = makeStyles(theme => ({
    root: {
        '& .MuiFormControl-root': {
            width: '80%',
            margin: theme.spacing(1)
        }
    }
}))

export function Form(props) {

    const classes = useStyles();
    const { children, ...other } = props;
    return (
        <form className={classes.root} autoComplete="off" {...other}>
            {props.children}
        </form>
    )
}

Within my actual component, I am using the DatePicker as follows:

              <DatePicker
                    name="last_changed"
                    label="Date last changed"                        
                    value={values.last_changed}                        
                    onChange={handleInputChange}
              /> 

My problem is, when I load the last_changed date into state which has the value of "19/10/2021" back into this "Date last changed" field, I am receiving the error "Invalid date format" and don't understand why as I initially created this date, from this datepicker.

Any ideas what I could be doing wrong?

10
  • Hello ArthurJ, can i see the handleInputChange implementation?
    – Jayffe
    Oct 19, 2021 at 8:26
  • @Jayffe - I have included handleInputChange implementation
    – ArthurJ
    Oct 19, 2021 at 8:45
  • it seems to work, maybe the problem is somewhere else : codesandbox.io/s/keen-cache-wlwpx?file=/src/App.js
    – Jayffe
    Oct 19, 2021 at 9:18
  • 1
    maybe something like this "19/10/2021".split('/').reverse().join('-')
    – Jayffe
    Oct 19, 2021 at 9:54
  • 1
    did it solve your problem?
    – Jayffe
    Oct 19, 2021 at 10:07

1 Answer 1

1

You need to convert your date to js date string before sending it to your material-ui component by using Date toString() eventually

If you receive your date in that format '19/10/2021' maybe you can do this

const receivedDate = '19/10/2019';
const formatedDate = receivedDate.split('/').reverse().join('-');

const textDate = new Date(formatedDate).toString()
1
  • This solved my problem. Really appreciate your assistance.
    – ArthurJ
    Oct 19, 2021 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.