设置时区反应日期选择器

Question

我使用react datepicker让用户选择一个日期。然而，现在它使用本地时间（PDT），但我想将其硬编码为使用特定时区（PST）。

我尝试使用utcOffsetprop，但它似乎没有任何作用。有人知道如何做到这一点吗？

Answer 1

因为datepicker不再使用moment.js了，所以我试图为这个问题实现一个hacky解决方案，假设初始值是一个字符串，例如：

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

Answer 2

这对我很有用：

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

Answer 3

就我而言，我在呈现React dates插件之前设置了defaultTimezone。反应日期将只使用默认时区。

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