MUI X DateTimePicker升级v6后无法显示时区的解决方法咨询

你的理解部分正确，但核心原因是Adapter的限制 #

你猜对了一半：MUI X v6的DateTimePicker的views配置确实没有时区相关选项，组件本身不提供时区选择功能，但无法通过format显示时区的核心原因是AdapterDateFns依赖的原生date-fns库本身不支持时区格式化——date-fns默认仅处理本地时间或UTC时间，没有内置的时区偏移格式化能力，除非搭配date-fns-tz扩展包。

实现时区显示的具体步骤 #

1. 安装时区扩展依赖 #

首先安装date-fns-tz，它是date-fns的时区处理扩展：

npm install date-fns-tz
# 或者
yarn add date-fns-tz

2. 自定义带时区支持的Adapter #

基于AdapterDateFns扩展，添加时区格式化的方法，让组件能识别时区相关的格式符（比如xxx表示GMT偏移）：

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { format } from 'date-fns';
import { formatInTimeZone, parseISOInTimeZone } from 'date-fns-tz';

export class AdapterDateFnsTz extends AdapterDateFns {
  format(date, formatStr) {
    // 检查格式是否包含时区相关符号，是的话用date-fns-tz格式化
    if (formatStr.includes('xxx') || formatStr.includes('zzzz')) {
      // 若要显示原字符串的时区偏移，可替换为对应时区标识符（如'Europe/Paris'）
      return formatInTimeZone(date, 'UTC', formatStr);
    }
    return super.format(date, formatStr);
  }

  parse(value, formatStr) {
    if (typeof value === 'string' && (value.includes('+') || value.includes('Z'))) {
      // 解析带时区的ISO字符串
      return parseISOInTimeZone(value, 'UTC');
    }
    return super.parse(value, formatStr);
  }
}

3. 配置DateTimePicker使用自定义Adapter #

在LocalizationProvider中替换原有的AdapterDateFns为自定义的AdapterDateFnsTz，然后设置对应的format：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { AdapterDateFnsTz } from './AdapterDateFnsTz'; // 引入自定义Adapter
import { useState } from 'react';
import { parseISOInTimeZone } from 'date-fns-tz';

function App() {
  const [value, setValue] = useState(() => {
    // 解析数据库返回的带时区字符串
    return parseISOInTimeZone('2023-05-04T14:26:36.118+02:00', 'UTC');
  });

  return (
    <LocalizationProvider dateAdapter={AdapterDateFnsTz}>
      <DateTimePicker
        label="带时区的日期时间"
        value={value}
        onChange={setValue}
        format="yyyy-MM-dd HH:mm:ss xxx"
      />
    </LocalizationProvider>
  );
}

export default App;

额外说明 #

• 如果需要让用户手动选择时区，MUI X目前没有内置的时区选择组件，你需要自行实现或搭配第三方时区选择组件，然后结合date-fns-tz处理时区转换。
• 若要精准匹配原字符串的时区偏移，可先从ISO字符串中提取时区信息，再传入formatInTimeZone的第二个参数。

内容的提问来源于stack exchange，提问作者Apokalos