web-dev-qa-db-ja.com

タイムゾーンReact-Datepickerを設定する

react-datepicker を使用して、ユーザーが日付を選択できるようにしています。ただし、現在は現地時間（PDT）を使用していますが、特定のタイムゾーン（PST）を使用するようにハードコーディングしたいと考えています。

utcOffset propを使用してみましたが、何も実行されていないようです。これを達成する方法を誰かが知っていますか？

reactjsreact-datepicker
15
MarksCode

私の部分では、React-datesプラグインをレンダリングする前にdefaultTimezoneを設定しました。 React-datesはデフォルトのタイムゾーンのみを使用します。

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

これは私にとってはうまくいきます：

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

私はこれまでずっと、ローカルオフセットを無視したい場合は、ゾーンをハードコーディングできます。 完全な答えを与えるためだけの観察： PSTは常に-08：00ですが、たとえば太平洋標準時が必要な場合は、今のところ-07：00です。この場合、インストールすることができます。 'moment.timezone'そして_import moment from 'moment-timezone'_そしてmoment.tz('US/Pacific').format('Z')で現在のオフセットを取得します

TypeScriptのコード（必要に応じてJavascriptに変更できます）：

_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

datepickerはもはやmoment.jsを使用しないので、初期値が文字列であると想定して、この問題のハッキーなソリューションを実装しようとしました：

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

日付の内側で、フォーマッタを次のように呼び出します。

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