@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偏移到本地之后，将其从DateTimePick出来，然后通过OnChange将其偏移到UTC。

这样，DateTimePicker小部件中的DateTime即使在语言环境中也与UTC DateTime相同。

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

Answer 2

使用 @bikesh-rana的见解是一个完整的解决方案。

这是使用formik的＆lt; dateTimePicker。助手功能：

const getTimezoneOffset = value => value.getTimezoneOffset() * 60000;

const makeLocalAppearUTC = value => {
  const dateTime = new Date(value);
  const utcFromLocal = new Date(dateTime.getTime() + getTimezoneOffset(dateTime));
  return utcFromLocal;
};

const localToUTC = dateTime => {
  const utcFromLocal = new Date(dateTime.getTime() - getTimezoneOffset(dateTime));
  return utcFromLocal;
};

并且，在＆lt; dateTimePicker中：

value={makeLocalAppearUTC(field.value)}
onChange={value => field.onChange({ target: { value: localToUTC(value), id } })}

谢谢您的Insight @bikesh-rana！