I've been using the DateTimePicker from MUI React library for the last 2 years. Today I decided to upgrade all the dependencies of the project I work with, and I noticed the DateTimePicker is not working anymore. Searching for the documentation, it came up they changed a few properties of this component and, among these, there is the value property. As they say here https://mui.com/x/migration/migration-pickers-v5/#update-the-format-of-the-value-prop :
Previously, it was possible to provide any format that your date management library was able to parse. For instance, you could pass value={new Date()} when using AdapterDayjs. This behavior brought a lot of confusion.
In v6, the format expected by the value prop is the same as for any other prop holding a date
Now the property needs a Date object. In the previous version I was able to show the date and time with the timezone in GMT because I could pass a string instead of a Date, but now I'm not able to manage this anymore. Here is my piece of code:
import { LocalizationProvider } from '@mui/x-date-pickers'
import { DateTimePicker } from '@mui/x-date-pickers'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
//some code
<LocalizationProvider dateAdapter={AdapterDateFns} >
<DateTimePicker
//other properties
value={myValue}
format='yyyy-MM-dd HH:mm:ss xxx'
/>
</LocalizationProvider>
Suppose myValue="2023-05-04T14:26:36.118+02:00" (value coming from the DB), I want the DateTimePicker to render 2023-05-04 14:26:36 GMT+2. My best try is 2023-05-04 14:26:36 xxx, but without any information about the timezone (which is mandatory to have in my case). As far I understand, it is impossible to show the timezone because the format property is built on the views property, which is an object that can have inside keys and values relative to year, month, day, hour, minutes and second (with no timezone at all). Am I correct? Is there a way to show the timezone inside the DateTimePicker component? Thanks!
