9

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

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Junie
  • 397
  • 2
  • 3
  • 12

4 Answers4

6

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/moment@1.x 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

benmercerdev
  • 392
  • 4
  • 11
  • 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? – mark.inman Sep 21 '22 at 14:43
  • @mark.inman 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 – Michal Kurz May 12 '23 at 09:11
1

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:

Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
1

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.

Dmitriy Kovalenko
  • 3,437
  • 3
  • 19
  • 39
0

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

Alexandre Fauquette
  • 117
  • 3