I am having a bit of an issue, and I've had not much luck finding a solution to it. The MUI X Date Picker (with Material UI) 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 ponent, 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 ponent 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 ponent 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} />}
/>
);
}
I am having a bit of an issue, and I've had not much luck finding a solution to it. The MUI X Date Picker (with Material UI) 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 ponent, 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 ponent 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 ponent 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} />}
/>
);
}
- Does my answer work for you? – NearHuscarl Commented Oct 28, 2021 at 3:04
- I went about a different way to solve it. After doing some research, someone pointed me at the fact that it was already in a date format, just parsed differently by MUI. – Vlad SD Commented Oct 29, 2021 at 11:02
4 Answers
Reset to default 9After doing some research, I was pointed to the fact that MUI's DatePicker/DateTimePicker uses a basic date format (as it formulated it in the event call). However, MUI parses and displays it differently, so all I had to do was simply the following:
let onlyDate = event.$d.toISOString();
this returned the date-time string I needed in the proper format.
If anyone es across this in the future, look at this page I had ended up at:
https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
It has multiple ways of parsing the data and functions to manipulate the date/time
To format the date, use inputFormat prop. If you're using date-fns, you can see the this table to know how to customize the format string:
<DateTimePicker
label={props.label}
value={value}
inputFormat="E MMM dd yyyy HH:MM:SS O"
onChange={setValue}
renderInput={(params) => <TextField {...params} fullWidth />}
/>
If you want to set the initial value in a ponent that uses controlled mode, you must initialize the it in useState:
const [value, setValue] = React.useState(initialDate);
I resolved a similar issue by setting value to mui MUI Datepicker using dayjs library
import dayjs from 'dayjs';
<DateTimePicker
label={props.label}
value={dayjs(value)}
onChange={onDatePicked}
renderInput={(params) => <TextField {...params} />}
/>
The error could happen both on the client's local machine if they have a different time zone, so when selecting a date, the system automatically picks a "translated date to UTC," which is incorrect if their time zone is not GMT+00.
Similarly, on a hosted client server, if the server's time zone differs from the user's, the selected date will be correct locally, but when sent to the server, it will be converted to UTC. This can result in a date that is one day earlier (23:00:00Z) for users in GMT+01 time zones.
The solution that works for me in both scenarios is:
setDate(moment(date).utc(true).toDate());
Another potential solution for the second scenario is:
setDate(moment(date).utc().set({ hours: 12, minutes: 0, seconds: 0, milliseconds: 0 }).toDate());