react-datepicker时区设置及日期对象转换问题求助

一、配置react-datepicker返回America/New_York时区的日期 #

react-datepicker v4及以上版本支持直接通过timeZone属性指定时区，配合date-fns的locale即可实现需求：

步骤1：确保依赖正确 #

如果还没安装date-fns（react-datepicker依赖它），先执行安装：

npm install date-fns react-datepicker
# 或使用yarn
yarn add date-fns react-datepicker

步骤2：修改组件代码 #

给DatePicker添加timeZone属性，并在onChange中格式化输出目标格式：

import { DatePicker } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { enUS } from 'date-fns/locale';

<DatePicker
  key={index}
  showPopperArrow={false}
  onChange={(date) => {
    // 格式化输出你需要的时区字符串格式
    const formattedDate = date.toLocaleString('en-US', {
      timeZone: 'America/New_York',
      weekday: 'short',
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      timeZoneName: 'longOffset'
    }).replace(',', '').replace(/ (\d{4}) /, ' $1 ');
    
    console.log(formattedDate); 
    // 输出："Thu Oct 27 2022 02:00:00 GMT-0400 (Eastern Daylight Time)"
    
    // 验证UTC时间
    console.log(date.toISOString()); 
    // 输出："2022-10-27T06:00:00Z"
  }}
  selected={wkday?.trigger_time ? new Date(wkday.trigger_time) : new Date()}
  customInput={<CustomInputWeekdayTimes />}
  showTimeSelect
  showTimeSelectOnly
  timeIntervals={60}
  timeCaption="Time"
  locale={enUS}
  timeZone="America/New_York" // 核心：指定时区为纽约
/>

设置后，用户选择的「02:00」会被识别为纽约时区的02:00，对应的UTC时间正好是你需要的2022-10-27T06:00:00Z。

二、将现有MST日期转换为纽约时区的同本地时间 #

如果你想把现有的"Thu Oct 27 2022 02:00:00 GMT-0600 (Mountain Daylight Time)"转换成纽约时区的同本地时间（保持02:00不变，时区切换为GMT-04），可以提取原时间的时分秒，再在纽约时区重新构建日期：

import { zonedTimeToUtc } from 'date-fns-tz';

// 原MST日期字符串
const originalDateStr = "Thu Oct 27 2022 02:00:00 GMT-0600 (Mountain Daylight Time)";
const originalDate = new Date(originalDateStr);

// 提取原日期的年月日时分秒
const year = originalDate.getFullYear();
const month = originalDate.getMonth();
const day = originalDate.getDate();
const hours = originalDate.getHours();
const minutes = originalDate.getMinutes();
const seconds = originalDate.getSeconds();

// 在纽约时区构建同本地时间的日期对象
const nycDate = zonedTimeToUtc(new Date(year, month, day, hours, minutes, seconds), 'America/New_York');

// 格式化为目标字符串
const formattedNycDate = nycDate.toLocaleString('en-US', {
  timeZone: 'America/New_York',
  weekday: 'short',
  month: 'short',
  day: 'numeric',
  year: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  timeZoneName: 'longOffset'
}).replace(',', '').replace(/ (\d{4}) /, ' $1 ');

console.log(formattedNycDate); 
// 输出："Thu Oct 27 2022 02:00:00 GMT-0400 (Eastern Daylight Time)"
console.log(nycDate.toISOString()); 
// 输出："2022-10-27T06:00:00Z"

注意：这里不是常规的时间转换（把MST的02:00转成纽约当地时间），而是保持本地时间的时分秒不变，切换时区，因此得到的UTC时间会和原MST时间的UTC不同，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者KingJoeffrey