The time-pick filter tip showing time in wrong time zone.

[pymumu]

material-react-table version

N/A

react & react-dom versions

N/A

Describe the bug and the steps to reproduce it

https://www.material-react-table.com/docs/examples/advanced

Check the example，what is shown is GMT time.

Minimal, Reproducible Example - (Optional, but Recommended)

N/A

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

This is up to your to specify in the mui date localization providers though, right? How would this be a bug with MRT?

[pymumu]

I tried, setting the time zone via dayjs, it didn't display correctly. Or maybe my settings are incorrect？

import utc from 'dayjs/plugin/utc';
import timezone from "dayjs/plugin/timezone";

dayjs.extend(utc);
dayjs.extend(timezone);

function TableTest(): React.JSX.Element  {
      <LocalizationProvider dateAdapter={AdapterDayjs}>
          <MRT_Table>...
      </LocalizationProvider>
}

Also by setting the cell's muiFilterDateTimePickerProps, it still didn't work.

  const columns = useMemo<MRTColumnDef<Data>[]>(
  () => [
    {
      accessorKey: 'timestamp',
      header: t('Time'),
      filterVariant: 'datetime-range',
      Cell: ({ cell }) => {
        const timestamp = cell.getValue<string>();
        const localTime = new Date(timestamp).toLocaleString();
        return <span>{localTime}</span>;
      },
      muiFilterDateTimePickerProps: {
        ampm: false,
        timezones: 'America/New_York',
      },
    },
  ]

Also, should the local time be displayed by default? The GMT time shown in the example is also inconsistent with convention.

I have only been learning React for a month, can you point out any problems? Thank you.

Thanks for the reply,

[pymumu]

Found these issues：

https://github.com/iamkun/dayjs/issues/268 https://github.com/iamkun/dayjs/issues/1915

Should dayjs.format be called here instead of toString? https://github.com/KevinVandy/material-react-table/blob/317a87cf4da853b2078400dd3918ce0b493a4fb9/packages/material-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx#L94