Как изменить time-picker time-picker материала-timezone?

Question

Time-Picker показывает местный часовой пояс, как изменить его на нужный часовой пояс?

Answer 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в желаемый часовой пояс:

В компоненте, который вы используете в сборщике, вам необходимо импортировать следующее:

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

Answer 2

Material-ui-pickers будет использовать часовой пояс, который вы настроили для приложения. Если твой moment экземпляр настроен на использование определенного часового пояса - когда вы передадите его компоненту выбора, он будет использовать этот часовой пояс и вернет дату в том же часовом поясе.

Answer 3

Есть недоразумение. Вы предоставляете дату для выбора даты, она показывает только пройденную дату. Для смены часового пояса вам следует обратиться к провайдеру дат, который вы используете в сочетании со сборщиком, обычно одним из следующих:

• momentJS
• Luxon
• дата-FNS

Answer 4

Версия 6 имеет встроенное управление часовыми поясами для некоторых библиотек.