UTC 和时区

日期和时间选择器支持 UTC 和时区。

概述

默认情况下，组件将始终使用您的 value / defaultValue 属性的时区

值时区: "America/New_York"

存储的值2022-04-17T15:30:00-04:00

您可以使用 timezone 属性显式定义应呈现值的时区

在 "America/New_York" 中呈现

在 "Europe/Paris" 中呈现

存储的值2022-04-17T15:30:00Z

<TimePicker
  value={value}
  onChange={setValue}
  timezone="America/New_York"
  label={'Rendered in "America/New_York"'}
/>
<TimePicker
  value={value}
  onChange={setValue}
  timezone="Europe/Paris"
  label={'Rendered in "Europe/Paris"'}
/>
<Typography>
  Stored value: {value == null ? 'null' : value.format()}
</Typography>

<TimePicker
  value={value}
  onChange={setValue}
  timezone="America/New_York"
  label={'Rendered in "America/New_York"'}
/>
<TimePicker
  value={value}
  onChange={setValue}
  timezone="Europe/Paris"
  label={'Rendered in "Europe/Paris"'}
/>
<Typography>
  Stored value: {value == null ? 'null' : value.format()}
</Typography>

按 Enter 开始编辑

如果组件没有 value 或 defaultValue 来从中推断时区，或者您不想在其原始时区中呈现值，则将需要这样做。

支持的时区

时区	描述
`"UTC"`	将使用协调世界时
`"default"`	将使用您的日期库的默认时区，可以使用以下方法设置此值 - `dayjs.tz.setDefault` on dayjs - `Settings.defaultZone` on luxon - `moment.tz.setDefault` on moment
`"system"`	将使用系统的本地时区
IANA 标准区域	示例: `"Europe/Paris"`, `"America/New_York"` 所有 IANA 区域的列表
固定偏移量	示例: `"UTC+7"` 仅适用于 Luxon

存储的值2022-04-17T15:30:00Z

与 Day.js 一起使用

Day.js 和 UTC

在使用 UTC 日期与 Day.js 之前，您必须启用 utc 插件

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

dayjs.extend(utc);

如何使用 Day.js 创建 UTC 日期？

要创建 UTC 日期，请使用 dayjs.utc 方法

const date = dayjs.utc('2022-04-17T15:30');

您可以查看 Day.js 上的 UTC 的文档以了解更多详细信息。

然后，您可以将您的 UTC 日期传递给您的选择器

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

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

dayjs.extend(utc);

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker defaultValue={dayjs.utc('2022-04-17T15:30')} />
    </LocalizationProvider>
  );
}

存储的值2022-04-17T15:30:00Z

Day.js 和时区

在使用时区与 Day.js 之前，您必须同时启用 utc 和 timezone 插件

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

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

如何使用 Day.js 在特定时区创建日期？

如果您的整个应用程序都使用来自同一时区的日期，请将默认区域设置为您的时区名称

import { dayjs } from 'dayjs';

dayjs.tz.setDefault('America/New_York');

const date = dayjs.tz('2022-04-17T15:30');

如果您只想在应用程序的某些部分使用此时区的日期，请将时区作为 dayjs.tz 方法的第二个参数传递

import { dayjs } from 'dayjs';

const date = dayjs.tz('2022-04-17T15:30', 'America/New_York');

您可以查看 Day.js 上的时区的文档以了解更多详细信息。

然后，您可以将您想要的时区中的日期传递给您的选择器

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

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

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

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker
        defaultValue={dayjs.tz('2022-04-17T15:30', 'America/New_York')}
      />
    </LocalizationProvider>
  );
}

存储的值2022-04-17T15:30:00-04:00

与 Luxon 一起使用

Luxon 和 UTC

如何使用 Luxon 创建 UTC 日期？

如果您的整个应用程序都使用 UTC 日期，请将默认区域设置为 "UTC"

import { DateTime, Settings } from 'luxon';

Settings.defaultZone = 'UTC';

const date1 = DateTime.fromISO('2022-04-17T15:30');
const date2 = DateTime.fromSQL('2022-04-17 15:30:00');

如果您只想在应用程序的某些部分使用 UTC 日期，请使用 DateTime.utc 或 Luxon 方法的 zone 参数创建 UTC 日期

import { DateTime } from 'luxon';

const date1 = DateTime.utc(2022, 4, 17, 15, 30);
const date2 = DateTime.fromISO('2022-04-17T15:30', { zone: 'UTC' });
const date3 = DateTime.fromSQL('2022-04-17 15:30:00', { zone: 'UTC' });

请查看 Luxon 上的 UTC 和时区的文档以了解更多详细信息。

然后，您可以将您的 UTC 日期传递给您的选择器

import { DateTime } from 'luxon';

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

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DateTimePicker
        defaultValue={DateTime.fromISO('2022-04-17T15:30', { zone: 'UTC' })}
      />
    </LocalizationProvider>
  );
}

存储的值2022-04-17T15:30:00.000Z

Luxon 和时区

如何使用 Luxon 在特定时区创建日期？

如果您的整个应用程序都使用来自同一时区的日期，请将默认区域设置为您的时区名称

import { DateTime, Settings } from 'luxon';

Settings.defaultZone = 'America/New_York';

const date1 = DateTime.fromISO('2022-04-17T15:30');
const date2 = DateTime.fromSQL('2022-04-17 15:30:00');

如果您只想在应用程序的某些部分使用此时区的日期，请使用 Luxon 方法的 zone 参数在此时区中创建日期

import { DateTime } from 'luxon';

const date1 = DateTime.fromISO('2022-04-17T15:30', { zone: 'America/New_York' });
const date2 = DateTime.fromSQL('2022-04-17 15:30:00', { zone: 'America/New_York' });

请查看 Luxon 上的 UTC 和时区的文档以了解更多详细信息。

然后，您可以将您想要的时区中的日期传递给您的选择器

import { DateTime } from 'luxon';

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

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DateTimePicker
        defaultValue={DateTime.fromISO('2022-04-17T15:30', {
          zone: 'America/New_York',
        })}
      />
    </LocalizationProvider>
  );
}

存储的值2022-04-17T15:30:00.000-04:00

与 Moment 一起使用

Moment 和 UTC

如何使用 Moment 创建 UTC 日期？

要创建 UTC 日期，请使用 moment.utc 方法

const date = moment.utc('2022-04-17T15:30');

请查看 Moment 上的 UTC 的文档以了解更多详细信息。

然后，您可以将您的 UTC 日期传递给您的选择器

import moment from 'moment';

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

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DateTimePicker defaultValue={moment.utc('2022-04-17T15:30')} />
    </LocalizationProvider>
  );
}

存储的值2022-04-17T15:30:00Z

Moment 和时区

在使用时区与 Moment 之前，您必须将来自 moment-timezone 的默认导出传递给 LocalizationProvider 的 dateLibInstance 属性

import moment from 'moment-timezone';

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

<LocalizationProvider dateAdapter={AdapterMoment} dateLibInstance={moment}>
  {children}
</LocalizationProvider>;

如何使用 Moment 在特定时区创建日期？

如果您的整个应用程序都使用来自同一时区的日期，请将默认区域设置为您的时区名称

import moment from 'moment-timezone';

moment.tz.setDefault('America/New_York');

const date = moment('2022-04-17T15:30');

如果您只想在应用程序的某些部分使用此时区的日期，请使用 moment.tz 方法创建日期

import moment from 'moment-timezone';

const date = moment.tz('2022-04-17T15:30', 'America/New_York');

请查看 Moment 上的时区的文档以了解更多详细信息。

然后，您可以将您想要的时区中的日期传递给您的选择器

import moment from 'moment-timezone';

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

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterMoment} dateLibInstance={moment}>
      <DateTimePicker
        defaultValue={moment.tz('2022-04-17T15:30', 'America/New_York')}
      />
    </LocalizationProvider>
  );
}

存储的值2022-04-17T15:30:00-04:00

API

请参阅下面的文档，以获得此处提到的组件的所有属性和类的完整参考。

<LocalizationProvider />

UTC 和时区

概述

支持的时区

与 Day.js 一起使用

Day.js 和 UTC

Day.js 和时区

与 Luxon 一起使用

Luxon 和 UTC

Luxon 和时区

与 Moment 一起使用

Moment 和 UTC

Moment 和时区

更多高级示例

存储 UTC 日期，但在系统时区中显示

存储 UTC 日期，但在另一个时区中显示

API