[data grid] dateTime column how to show date/time for another timezone

[oleksandrfomin5995]

The problem in depth

I need to display the date and time returned from the server in a certain timezone (in the datagrid column with 'dateTime' type).
The date I receive is in UTC (e.g 2024-01-24T11:52:12). Let's say I want to convert this date to America/Bogota timezone (UTC -5), so that the datagrid displays 24/01/2024 06:52AM

I'm converting the date to the desired timezone like this

      valueGetter: (params: GridValueGetterParams) => {
        const timeZone = params.api.getRow(params.id).siteView?.timeZone;

        return dayjs(params.value).tz(timeZone).toDate();
      }

The only problem I encounter is that converting the dayjs string to JS Date object automatically adds the client's UTC offset. So far I have not managed to find a way around it.

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: datagrid datetime
Order ID: 67193

[michelengelen]

Hey @oleksandrfomin5995 there is a problem with dayjs and using any timezone with a 00:00/00:00 offset (not only UTC). This PR should fix it, but the maintainer does not seem very active lately. Since this is out of our control we cannot do anything but advice you to use a different date package (e.g. moment) to handle such use-cases.
Sry 🙇🏼

[oleksandrfomin5995]

Hey @oleksandrfomin5995 there is a problem with dayjs and using any timezone with a 00:00/00:00 offset (not only UTC). This PR should fix it, but the maintainer does not seem very active lately. Since this is out of our control we cannot do anything but advice you to use a different date package (e.g. moment) to handle such use-cases. Sry 🙇🏼

Is there an example of valueGetter method using moment?

[michelengelen]

Here is a basic example: Moment in datagrid