@mui/x-date-pickers 始终为 UTC，请

Question

使用@mui/x-date-pickers我需要在 UTC 中显示和编辑。我存储的数据也是 UTC 格式。我可以将值包装在渲染函数中，以强制以我需要的格式显示它，但编辑后日期会显示在我的区域设置中！我觉得应该有一个选项可以说“让我在 UTC 中显示和编辑”。非常感谢任何帮助。我不敢相信科学应用程序以前没有出现过这种情况。

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const dateFormat = 'yyyy-MM-dd HH:mm:ss';
const inputMask = '____-__-__ __:__:__';
const views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'];
const renderUTC = new Date(date).toISOString().replace('T', ' ').substring(0, 19);

...render returning:
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateTimePicker
            value={renderUTC(value)}
...

Answer 1

遇到了同样的问题。我的解决方法是使用 getTimezoneOffset() 在进入 DateTimePicker 作为值之前将本地偏移到 UTC，并在通过 onChange 从 DateTimePicker 出来之后将 UTC 偏移到本地。

这样，DateTimePicker 小部件中的日期时间显示与 UTC 日期时间相同，即使它位于区域设置中。

const offset = (utcTime) => {
    const tzoffset = utcTime.getTimezoneOffset() * 60000
    const localTime = new Date(utcTime.getTime() + tzoffset)
    return localTime
}