如何为Material UI X DatePicker设置自定义时区？

Question

我正在使用 Material UI X DatePicker，其 API https://mui.com/x/react-date-pickers/timezone/ 包含时区属性。我正在尝试测试它。我知道赫尔辛基的 13.04.2024 00:00:00 可能表示为“2024-04-12T21:00:00.000Z”。 我的 Windows 10 计算机有“(UTC+01:00) 布鲁塞尔、哥本哈根、马德里、巴黎”，但我要求我的 DatePicker 在欧洲/赫尔辛基时区显示此时间戳。

所以，对于 React 代码

   const handleDateChange = useCallback((value, context, fieldName) => {

    alert(value);

    setEmployeeFieldValue({ 
      name: fieldName, 
      value: value,
      componentKey: componentKey,
    });
  }, [setEmployeeFieldValue]);

return ( ...
  <DatePicker
    label="Birthday"
    value={new Date('2024-04-12T21:00:00.000Z')}
    name="birthday"
    onChange={(newValue, context) => handleDateChange(newValue, context, 'birthday')}
    timezone="Europe/Helsinki"
    slotProps={{ textField: { 
    variant: "standard",
    fullWidth: true,
       } }}
    /> ...)

我期待两件事：

1. 应该显示 13.04.2024（赫尔辛基午夜），但是 - DatePicker 显示 12.04.2024。
2. 将日期设置为 14.04.2024 将显示类似“2024-04-13T21:00:00.000Z”（这是对应于赫尔辛基 14.04.2024 午夜的 UTC），因为： 1）可以合理地假设 DatePicker将把时间调到午夜； 2）我在属性中指定了赫尔辛基时区。但是，警报显示

   Sun Apr 14 2024 23:00:00 GMT+0200 (Central European Summer Time)

所以 - 本质上 - 在我看来 DatePicker 忽略了

timezone

属性？两者 - 用于显示值和更新值。

Answer 1

我想通了 - 我必须使用 dayjs 适配器，如 https://mui.com/x/react-date-pickers/timezone/:

中所述

UTC 和时区支持是一项持续的工作。

目前只有 AdapterDayjs、AdapterLuxon 和 AdapterMoment 与 UTC 日期和时区兼容。

我确实使用了 DateFns，但该适配器不受支持。我必须用以下内容包装 DatePicker：

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={fi}>

并在值中使用datejs对象：

value={datejs('2024-04-12T21:00:00.000Z')}