强制react-datepicker使用UTC

Question

如果选择，则开始时为 null。

当我选择日期 20/04/2022 时，

Datepicker 显示 20/04/2022

Console.log 显示 Wed Apr 20 2022 00:00:00 GMT+0200（中欧夏令时间），

但表单上的有效负载显示 2022-04- 19T22:00:00.000Z

我可以将格式锁定为 UTC 吗？

Answer 1

我想完全忽略用户的本地时区，甚至不使用它来显示或发送到 API。为了做到这一点，我使用他们的时区来解析来自我的目标 api 时区 (utc) 的日期。这对我有用：

它在 momentjs b/c 中，我们的代码很旧，可以在较新的库中复制

  const { timeZone: localTZ } = Intl.DateTimeFormat().resolvedOptions()
  // The TZ format I want everything to be displayed and submitted as
  const apiTZ = 'utc'
  const [apiTime, setApiTime] = useState(moment.utc())

  <DatePicker
    onChange={date => {
      const apiTimeFromPickerLocalDate = moment(date)
        .tz(localTZ)
        // change TZ without changing date/time
        .tz(apiTZ, true)
        .format()        
      setApiTime(apiTimeFromPickerLocalDate)
    }}
    selected={
      moment(apiTime)
        .tz(apiTZ)
        // Display picker time in local TZ without changing date/time
        .tz(localTZ, true)
        .toDate()
    }
  </DatePicker>

Playground 版本（链接)

const localDate = moment(new Date()).format();
const { timeZone: localTZ } = Intl.DateTimeFormat().resolvedOptions();
const apiTZ = "utc";
const apiTimeFromPickerLocalDate = moment(localDate)
  .tz(localTZ)
  // change TZ without changing date/time
  .tz(apiTZ, true)
  .format();

const pickerTimeFromApiTime = moment(apiTimeFromPickerLocalDate)
  .tz(apiTZ)
  .tz(localTZ, true)
  .toDate();

console.log("local time", localDate);
console.log("api time", apiTimeFromPickerLocalDate);
console.log("picker time", pickerTimeFromApiTime);

local time 2023-02-09T13:12:39-10:00 
api time 2023-02-09T13:12:39Z 
picker time Thu Feb 09 2023 13:12:39 GMT-1000 (Hawaii-Aleutian Standard Time)

Answer 2

这是 react-datepicker 的已知问题。

您有 2 种可能的解决方案 -

1. 您可以在从表单发送数据之前转换日期，
   或者
2. 您可以将每个时间从 UTC 转换为本地，再从本地转换为 UTC
   用户的日期选择。

您可以在此处查看第二个解决方案的问题和代码实现和<一个href="https://github.com/Hacker0x01/react-datepicker/issues/1787#issuecomment-770313939" rel="nofollow noreferrer">此处。