How to change the material-ui-pickers time-picker timezone?

Question

Time-picker is showing local timezone, how to change that to desired timezone?

Nunhood

Answer 1

As mentioned in other answers, the Material-UI pickers use a third-party date/time library, which you need to add and configure.

So, you'll need to yarn/npm add these:

yarn add moment
yarn add moment-timezones
yarn add @date-io/[email protected] moment

In your App.js add this:

import moment from 'moment'

let launchMoment = require('moment')
require('moment-timezone')
moment.tz.setDefault('America/Los_Angeles')

You can change the setDefault to your desired timezone:

In the component that you're using the picker, you'll need to import these:

import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers'
import MomentUtils from '@date-io/moment'

Your picker will look something like this:

<MuiPickersUtilsProvider utils={MomentUtils}>
          <KeyboardDatePicker
            disableToolbar
            variant="inline"
            format="ddd MMM Do"
            margin="normal"
            id="date-picker-inline"
            value={date}
  
            onChange={handleDateChange}
            KeyboardButtonProps={{
              'aria-label': 'change date'
            }}
           
          />
</MuiPickersUtilsProvider>

Note: the Pickers support other date/time libraries, but some don't have local timezone configurability, such as date-fns

Devaluation

I feel like this is the solution; however when i remove utils={DateFnsUtils} my date picker breaks. is there a way to use multiple utils? – Cookstove

@Cookstove This is because the picker expects different type of value based on the used adapter (previously utils). This is because it's the adapter which internally handles date operations. So if you switch from date-fns to moment, you should pass a moment object as value – Telson

Answer 2

There is a misunderstanding. You provide a date to the datepicker, it only shows the passed date. For timezone shift you have to take a look to the date provider you make use of coupled with the picker, usually one of the following:

• momentJS
• luxon
• date-fns

Lucero

Answer 3

Material-ui-pickers will leverage the timezone you configured for the application. If your moment instance is set up to use particular timezone - when you pass it to the picker component it will use that timezone and return back the date in the same timezone.

Grammatical

Do you have an example? – Malraux

Answer 4

The v6 has a built-in timezone management for some of the libraries

Trichinosis