web-dev-qa-db-fra.com

Définir le fuseau horaire React-Datepicker

J'utilise react-datepicker pour permettre à l'utilisateur de sélectionner une date. Cependant, en ce moment, il utilise l'heure locale (PDT), mais je veux le coder en dur pour utiliser un fuseau horaire spécifique (PST).

J'ai essayé d'utiliser utcOffset prop mais il ne semble rien faire. Est ce que quelqu'un sait comment accomplir cela?

reactjsreact-datepicker
15
MarksCode

Pour ma part j'ai défini le defaultTimezone avant de rendre le plugin React-dates. React-dates utilisera simplement le fuseau horaire par défaut.

moment.tz.setDefault('America/Los_Angeles');
3
Matt2772

Cela fonctionne pour moi:

import React, { ComponentProps } from "react"
import DatePicker from "react-datepicker"
import moment from "moment"

interface Props {
  timezone: string
}

const DatePickerWithTimezone = ({
  selected,
  onChange,
  timezone,
  ...props
}: Props & ComponentProps<typeof DatePicker>) => (
  <DatePicker
    selected={selected ? setLocalZone(selected, timezone) : null}
    onChange={(v, e) => {
      onChange(v ? setOtherZone(v, timezone) : null, e)
    }}
    {...props}
  />
)

const setLocalZone = (date: Date, timezone: string) => {
  const dateWithoutZone = moment
    .tz(date, timezone)
    .format("YYYY-MM-DDTHH:mm:ss.SSS")
  const localZone = moment(dateWithoutZone).format("Z")
  const dateWithLocalZone = [dateWithoutZone, localZone].join("")

  return new Date(dateWithLocalZone)
}

const setOtherZone = (date: Date, timezone: string) => {
  const dateWithoutZone = moment(date).format("YYYY-MM-DDTHH:mm:ss.SSS")
  const otherZone = moment.tz(date, timezone).format("Z")
  const dateWithOtherZone = [dateWithoutZone, otherZone].join("")

  return new Date(dateWithOtherZone)
}

export default DatePickerWithTimezone
1
Martin Liptak

Je suis passé par là, si vous avez décidé de simplement ignorer votre décalage local, vous pouvez coder en dur la zone. Observation juste pour donner une réponse complète: PST sera toujours -08: 00, mais si vous voulez par exemple l'heure du Pacifique, c'est maintenant -07: 00, dans ce cas, vous voudrez peut-être installer 'moment.timezone' puis import moment from 'moment-timezone' Et juste obtenir le décalage actuel avec moment.tz('US/Pacific').format('Z')

Le code en TypeScript (je peux le changer en Javascript si vous voulez): 

interface ICalendarInputProps {
  handleChange: (newDate: moment.Moment) => void;
}

const CalendarInput = ({ handleChange }: ICalendarInputProps) => {
  const onChange = (date: Date) => {
    handleChange(moment(`${moment(date).format('YYYY-MM-DDThh:mm:ss')}-08:00`));
    // This is to get the offset from a timezone: handleChange(moment(`${moment(date).format('YYYY-MM-DDThh:mm:ss')}${moment.tz('US/Pacific').format('Z')}`));
  };

  return (<DatePicker onChange={onChange} />);
};

export default CalendarInput;
1
Manuel Machado

comme datepicker n'utilise plus moment.js, j'ai essayé d'implémenter une solution hacky pour ce problème, en supposant que la valeur initiale est une chaîne par exemple:

export const formatUTC = (dateInt, addOffset = false) => {
    let date = (!dateInt || dateInt.length < 1) ? new Date : new Date(dateInt);
    if (typeof dateInt === "string") {
        return date;
    } else {
        const offset = addOffset ? date.getTimezoneOffset() : -(date.getTimezoneOffset());
        const offsetDate = new Date();
        offsetDate.setTime(date.getTime() + offset * 60000)
        return offsetDate;
    }
}

date à l'intérieur j'appelle le formateur comme ceci:

selected={formatUTC(this.props.input.value,true)}
                    onChange={date => formatUTC(date)}
0
Julian Schroeter