Comment changer le fuseau horaire du sélecteur de temps Material-ui-pickers?

Il y a un malentendu. Vous fournissez une date au sélecteur de date, il n'affiche que la date passée. Pour le changement de fuseau horaire, vous devez regarder le fournisseur de date que vous utilisez associé au sélecteur, généralement l'un des suivants:

• momentJS
• luxon
• date-fns

Les sélecteurs d'interface utilisateur de matériaux exploiteront le fuseau horaire que vous avez configuré pour l'application. Si votre instance de moment est configurée pour utiliser un fuseau horaire particulier, lorsque vous la transmettez au composant de sélection, elle utilise ce fuseau horaire et renvoie la date dans le même fuseau horaire.

Comme mentionné dans d'autres réponses, les sélecteurs Material-UI utilisent une bibliothèque de date / heure tierce, que vous devez ajouter et configurer.

Vous devrez donc yarn / npm ajouter ces éléments: p>

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

Dans votre App.js ajoutez ceci:

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

Vous pouvez changer le setDefault à votre fuseau horaire souhaité:

Dans le composant que vous ' si vous utilisez le sélecteur, vous devrez les importer:

import moment from 'moment'

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

Votre sélecteur ressemblera à ceci:

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

Remarque: les sélecteurs prennent en charge d'autres bibliothèques de date / heure, mais certains n'ont pas de configurabilité de fuseau horaire local, comme date-fns