Question

时间选择器是显示本地时区，如何改变，为了期望的时区？

Answer 1

存在误解。您为日期选择器提供一个日期，它仅显示经过的日期。对于时区转换，您必须查看与选择器结合使用的日期提供程序，通常是以下之一：

Answer 2

Material-ui-pickers将利用您为应用程序配置的时区。如果您的moment实例设置为使用特定时区-当您将其传递给选择器组件时，它将使用该时区并返回同一时区中的日期。

Answer 3

如其他答案所述，Material-UI选择器使用第三方日期/时间库，您需要添加和配置它。

因此，您需要添加/添加以下内容：

yarn add moment
yarn add moment-timezones
yarn add @date-io/moment@1.x moment

在您的App.js中添加：

import moment from 'moment'

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

您可以将setDefault更改为所需的timezone：

在使用选择器的组件中，您需要导入以下内容：

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

您的选择器将如下所示：

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

注意：选取器支持其他日期/时间库，但有些不具有本地时区可配置性，例如date-fns

如何更改材质用户界面选择器的时间选择器时区？

3 个答案: