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:

Value timezone: "America/New_York"

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:

Rendered in "America/New_York"

Rendered in "Europe/Paris"

Stored value: 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>

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

How to create a UTC date with Day.js?

To create a UTC date, use the dayjs.utc method

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

You can check out the documentation of the UTC on Day.js for more details.

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

How to create a date in a specific timezone with Day.js?

If your whole application is using dates from the same timezone, set the default zone to your timezone name:

import { dayjs } from 'dayjs';

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

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

If you only want to use dates with this timezone on some parts of your application, pass the timezone as the 2nd parameter of the dayjs.tz method:

import { dayjs } from 'dayjs';

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

You can check out the documentation of the timezone on Day.js for more details.

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

How to create a UTC date with Luxon?

If your whole application is using UTC dates, set the default zone to "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');

If you only want to use UTC dates on some parts of your application, create a UTC date using DateTime.utc or with the zone parameter of Luxon methods:

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

Please check out the documentation of the UTC and timezone on Luxon for more details.

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

How to create a date in a specific timezone with Luxon?

If your whole application is using dates from the same timezone, set the default zone to your timezone name:

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

If you only want to use dates with this timezone on some parts of your application, create a date in this timezone using the zone parameter of Luxon methods:

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

Please check out the documentation of the UTC and timezone on Luxon for more details.

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

How to create a UTC date with Moment?

To create a UTC date, use the dayjs.utc method

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

Please check out the documentation of the UTC on Moment for more details.

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

How to create a date in a specific timezone with Moment?

If your whole application is using dates from the same timezone, set the default zone to your timezone name:

import moment from 'moment-timezone';

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

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

If you only want to use dates with this timezone on some parts of your application, create a date using the moment.tz method:

import moment from 'moment-timezone';

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

Please check out the documentation of the timezone on Moment for more details.

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.

<LocalizationProvider />