Skip to content
+

UTC and timezones

Date and Time Pickers support UTC and timezones.

Overview

By default, the components will always use the timezone of your value / defaultValue prop:

Stored value: 2022-04-17T15:30:00-04:00

You can use the timezone prop to explicitly define the timezone in which the value should be rendered:

Stored value: 2022-04-17T15:30:00Z

Press Enter to start editing

This will be needed if the component has no value or defaultValue to deduct the timezone from it or if you don't want to render the value in its original timezone.

Supported timezones

Timezone Description
"UTC" Will use the Coordinated Universal Time
"default" Will use the default timezone of your date library, this value can be set using
- dayjs.tz.setDefault on dayjs
- Settings.defaultZone on luxon
- moment.tz.setDefault on moment
"system" Will use the system's local timezone
IANA standard zones Example: "Europe/Paris", "America/New_York"
List of all the IANA zones
Fixed offset Example: "UTC+7"
Only available with Luxon

Stored value: 2022-04-17T15:30:00Z

Usage with Day.js

Day.js and UTC

Before using the UTC dates with Day.js, you have to enable the utc plugin:

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

dayjs.extend(utc);

You can then pass your UTC date to your picker:

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>
  );
}

Stored value: 2022-04-17T15:30:00Z

Day.js and timezones

Before using the timezone with Day.js, you have to enable both the utc and timezone plugins:

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

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

You can then pass your date in the wanted timezone to your picker:

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>
  );
}

Stored value: 2022-04-17T15:30:00-04:00

Usage with Luxon

Luxon and UTC

You can then pass your UTC date to your picker:

import { DateTime, Settings } 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>
  );
}

Stored value: 2022-04-17T15:30:00.000Z

Luxon and timezone

You can then pass your date in the wanted timezone to your picker:

import { DateTime, Settings } 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>
  );
}

Stored value: 2022-04-17T15:30:00.000-04:00

Usage with Moment

Moment and UTC

You can then pass your UTC date to your picker:

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>
  );
}

Stored value: ٢٠٢٢-٠٤-١٧T١٥:٣٠:٠٠Z

Moment and timezone

Before using the timezone with Day.js, you have to pass the default export from moment-timezone to the dateLibInstance prop of LocalizationProvider:

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>;

You can then pass your date in the wanted timezone to your picker:

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>
  );
}

Stored value: ٢٠٢٢-٠٤-١٧T١٥:٣٠:٠٠-٠٤:٠٠

More advanced examples

Store UTC dates but display in system's timezone

The demo below shows how to store dates in UTC while displaying using the system timezone.

Stored value: 2022-04-17T15:30:00Z

Store UTC dates but display in another timezone

The demo below shows how to store dates in UTC while displaying using the Pacific/Honolulu timezone.

Stored value: 2022-04-17T15:30:00Z

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.