UTC 與時區

日期與時間選取器支援 UTC 與時區。

概觀

預設情況下，元件將始終使用您的 value / defaultValue prop 的時區

值時區："America/New_York"

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

您可以使用 timezone prop 明確定義應呈現值的時區

在 "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` 在 dayjs 上 - `Settings.defaultZone` 在 luxon 上 - `moment.tz.setDefault` 在 moment 上
`"system"`	將使用系統的本地時區
IANA 標準時區	範例：`"Europe/Paris"`、`"America/New_York"` 所有 IANA 時區的列表
固定偏移量	範例：`"UTC+7"` 僅適用於 Luxon

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

與 Day.js 一起使用

Day.js 與 UTC

在使用 Day.js 的 UTC 日期之前，您必須啟用 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 prop

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

請參閱以下文件，以完整參考此處提及的元件可用的所有 props 和類別。

<LocalizationProvider />

UTC 與時區

概觀

支援的時區

與 Day.js 一起使用

Day.js 與 UTC

Day.js 與時區

與 Luxon 一起使用

Luxon 與 UTC

Luxon 與時區

與 Moment 一起使用

Moment 與 UTC

Moment 與時區

更多進階範例

儲存 UTC 日期但在系統時區中顯示

儲存 UTC 日期但在另一個時區中顯示

API