I am having a bit of an issue, and I've had not much luck finding a solution to it. The MUI DatePicker seems to have a format that it has as a default, for displaying the dates as

Fri Oct dd yyyy HH:MM:SS GMT+HHMM (name of timezone here)

However, I need to be able to pass a date in the format of

yyyy-MM-ddThh:MM:ss+HH:mm which is (Date)T(Time)+(Timezone)

to the component, and then back to be submitted in the same format.

In some cases, the value for this date-time-picker is not set, in some cases it is. And I'm not sure how to get the format to what I need it, since I have no control of the date-format I am receiving.

It seems the component can parse the data I give it, and set the proper value, but the new data (if the value changes) does is in a different format.

edit: Just a quick example for above.

Data I get: 2020-10-11T15:56:28+11:00

Data the component outputs: { "$L": "en", "$u": undefined, "$d": Date Sun Oct 11 2020 15:56:28 GMT+1100 (Australian Eastern Daylight Time), "$x": {}, "$y": 2020, "$M": 9, "$D": 11, "$W": 0, "$H": 15, "$m": 56, … }

Relevant code for DateTimePicker:

import React from 'react';
import TextField from '@mui/material/TextField';
import DateTimePicker from '@mui/lab/DateTimePicker';

export default function DateTimePickerComponent(props) {
    const [value, setValue] = React.useState(null);
    const onDatePicked = (event) => {
        setValue(event);
        let onlyDate = event.$d;
        props.onChange(onlyDate);
        console.log("Date Changed", event, onlyDate);
    };

    React.useEffect(() => {
        if (props.initialValue !== 0 && value === null) {
            setValue(props.initialValue);
            console.log("Initial Date is", props.initialValue);
        }
    }, [props.initialValue, value, setValue]);

    return (
        <DateTimePicker
            label={props.label}
            value={value}
            onChange={onDatePicked}
            renderInput={(params) => <TextField {...params} />}
        />
    );
}