如何更改 material-ui-pickers 时间选择器时区？答案

【问题标题】：How to change the material-ui-pickers time-picker timezone?如何更改 material-ui-pickers 时间选择器时区？
【发布时间】：2019-06-26 02:56:28
【问题描述】：

时间选择器显示本地时区，如何将其更改为所需时区？

【问题讨论】：

你能解释一下你尝试过什么没有成功吗？

标签： reactjs material-ui timepicker luxon

【解决方案1】：

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

所以，你需要在 yarn/npm 添加这些：

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>

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

【讨论】：

【解决方案2】：

有误会。您向日期选择器提供日期，它只显示通过的日期。对于时区转换，您必须查看您使用的日期提供程序以及选择器，通常是以下之一：

【讨论】：

【解决方案3】：

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

【讨论】：

你有例子吗？