Javascript 强制datepicker react小部件使用UTC？

我正在使用react DateTimePicker小部件，希望将日期存储在ISO中，而不考虑时区和DST。本地化的当前设置为en GB

我尝试了以下帖子中的建议，并浏览了moment.js的文档

但最终结果是，但结果是1999-09-07T23:00:00.000Z，因此没有存储正确的输入日期

我现在使用以下formatDate函数格式化日期，但是当我将我机器上的时区更改为智利时，日期1999-09-07 GMT-0200变为1999-09-08T00:00:00.000Z

const formatDate = (v) => {
  console.log(v)
  const date = moment(v).format('YYYY-MM-DD')
  console.log(moment.utc(date).toJSON())
  return moment.utc(date).toJSON()
}

---

有什么我遗漏的吗？

我尝试了解决这个问题的不同方法，但最后我创建的最可行的变体可以在下面找到

此变体的主要思想是在输入字段中显示想要的TZ，但在日历和时间列表中显示本地TZ

如果您能提供反馈，我将不胜感激

另见：和

import React，{useState，usemo，useCallback}来自“React”；
从“时刻时区”导入时刻；
从“react widgets/lib/DateTimePicker”导入DateTimePickerOrigin；
康斯特蒙斯霍特纳姆斯=[
‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’，
‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’，
];
const dayShortNames=['Su'，'Mo'，'Tu'，'We'，'Th'，'Fr'，'Sa']；
常量DateTimePicker=（道具）=>{
常数{
tz，/（dateStr？新日期（dateStr）：空），
[],
);
常量固定格式='mmmd，YYYY HH:mmz'；
const fixedTimeFormat=useCallback(
（日期）=>{
if（localTz！==tz）{
返回`${moment.tz（date，localTz）.format（${moment.tz（date，tz）.format（$HH:mmz'））}`；
}
return moment.tz（date，localTz）.format（'HH:mm'）；
},
[tz，localTz，fixedFormat]，
);
const fixedDateFormat=useCallback(
（date）=>String（date.getDate（）），
[],
);
const fixedYearFormat=useCallback(
（date）=>String（date.getFullYear（）），
[],
);
常量fixedMonthFormat=useCallback(
（date）=>monthShortNames[date.getMonth（）]，
[],
);
const fixedDayFormat=useCallback(
（date）=>dayShortNames[date.getDay（）]，
[],
);
常量fixedMin=useMoom(
（）=>（最小===null？未定义：最小），
[min],，
);
常量fixemax=useMoom(
（）=>（max==null？未定义：max），
[max]，
);
返回(
);
};

在构造力矩对象时始终提供格式字符串。这将显著减少错误。“1999-09-07T23:00:00.000Z”是UTC的“Wed Sep 08 1999 00:00:00 GMT+0100”，为什么您认为这是错误的（而1999-09-07 GMT-0200是1999-09-08T00:00.000Z）？也许您的意思是希望ISO 8601带有本地时区？矩.js的默认格式是ISO 8601带有本地时区，因此

矩（'Wed Sep 08 1999 00:00:00 GMT+0100'）。format（）

生成类似“1999-09-08T00:00:00+0100”的字符串如果主机位于时区+0100。如果要在特定时区设置日期格式，请参阅。@RobG yes，第二条语句是正确的。我现在采用与您在最后一点上所述类似的方法。使用矩（）.utcOffset（）以utc格式存储本地时间的正确值

const formatDate = (v) => {
  console.log(v)
  const date = moment(v).format('YYYY-MM-DD')
  console.log(moment.utc(date).toJSON())
  return moment.utc(date).toJSON()
}

import React, { useState, useMemo, useCallback } from 'react';
import moment from 'moment-timezone';
import DateTimePickerOrigin from 'react-widgets/lib/DateTimePicker';

const monthShortNames = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
];

const dayShortNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];

const DateTimePicker = (props) => {
  const {
    tz, // <-- tz you want to display, eg 'Etc/UTC'
    min,
    max,
    value,
    onChange,
    ...tail
  } = props;

  const [localTz] = useState(moment.tz.guess());

  const fixedParse = useCallback(
    (dateStr) => (dateStr ? new Date(dateStr) : null),
    [],
  );

  const fixedFormat = 'MMM D, YYYY HH:mm z';

  const fixedTimeFormat = useCallback(
    (date) => {
      if (localTz !== tz) {
        return `${moment.tz(date, localTz).format('HH:mm z')} (${moment.tz(date, tz).format('HH:mm z')})`;
      }
      return moment.tz(date, localTz).format('HH:mm');
    },
    [tz, localTz, fixedFormat],
  );

  const fixedDateFormat = useCallback(
    (date) => String(date.getDate()),
    [],
  );

  const fixedYearFormat = useCallback(
    (date) => String(date.getFullYear()),
    [],
  );

  const fixedMonthFormat = useCallback(
    (date) => monthShortNames[date.getMonth()],
    [],
  );

  const fixedDayFormat = useCallback(
    (date) => dayShortNames[date.getDay()],
    [],
  );

  const fixedMin = useMemo(
    () => (min === null ? undefined : min),
    [min],
  );

  const fixedMax = useMemo(
    () => (max === null ? undefined : max),
    [max],
  );

  return (
    <DateTimePickerOrigin
      {...tail}
      parse={fixedParse}
      format={fixedFormat}
      timeFormat={fixedTimeFormat}
      dateFormat={fixedDateFormat}
      yearFormat={fixedYearFormat}
      monthFormat={fixedMonthFormat}
      dayFormat={fixedDayFormat}
      min={fixedMin}
      max={fixedMax}
      value={value}
      onChange={onChange}
    />
  );
};