reactjs - 如何更改 material-ui-pickers 时间选择器时区?
问题描述
时间选择器显示本地时区,如何将其更改为所需的时区?
解决方案
如其他答案中所述,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
为您想要的时区:
在您使用选择器的组件中,您需要导入这些:
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>
注意:Pickers 支持其他日期/时间库,但有些没有本地时区可配置性,例如date-fns
推荐阅读
- javascript - 使用 Axios 全局处理请求超时错误并向用户显示警报的最佳方式?
- c - 在辅助函数中扫描二维数组并且 main() 仍然能够看到它
- android - 为什么我在运行 react-native 链接时收到无法读取属性“UIAppFonts of null”错误?
- javascript - 如何从同一级别的不同记录中提取多个javascript值(对象不是数组)
- objective-c - 在 Objective-C 中检索和使用 Firebase 中的值
- angular - 使用 Angular 拦截器取消所有待处理的 http 请求
- javascript - 在组件中显示数据时出现 angular6 的问题
- python - 使用 WMI python 计算正在运行的进程数很慢
- java - MobileAds.initialize(Context, String) 已弃用
- angular - 在 Angular 中,我如何使用 ngrx 订阅多个可观察对象,这些可观察对象在每次更改下拉值时都会更新