Time-picker is showing local timezone, how to change that to desired timezone?
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