如何在react-datepicker中设置指定时区 不使用浏览器默认时区

react-datepicker 默认依赖JS原生Date对象解析时间，会自动使用浏览器当前所在时区做转换，要实现固定指定时区（不跟随浏览器时区变化）的时间显示、选择，只需要做两层时间偏移转换即可，不需要修改组件源码。

核心逻辑 #

• 传入selected属性前，先把后端返回的毫秒时间戳做偏移校正，抵消浏览器本地时区和目标时区的差值，保证组件渲染出来的时间永远是目标时区的对应时间
• 用户选中时间触发onChange时，把组件返回的Date对象反向校正，得到对应目标时区的真实毫秒时间戳，不要直接取date.getTime()（这个值会带本地时区偏移误差）

无额外依赖实现 #

直接复用下面的转换工具函数，自动兼容夏令时计算，不需要硬编码时区偏移量：

// 获取指定时区相对于UTC的分钟偏移，自动适配夏令时
const getTimezoneOffset = (timeZone, date = new Date()) => {
  const tzDate = new Date(date.toLocaleString('en-US', { timeZone }));
  const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
  return (tzDate.getTime() - utcDate.getTime()) / 60000;
};

// 原始毫秒时间戳 -> 适配react-datepicker显示的Date对象（固定目标时区）
const timestampToPickerDate = (timestamp, targetTimezone) => {
  const localOffset = new Date().getTimezoneOffset();
  const targetOffset = getTimezoneOffset(targetTimezone, new Date(timestamp));
  return new Date(timestamp + (localOffset + targetOffset) * 60000);
};

// react-datepicker返回的选中Date -> 目标时区对应的真实毫秒时间戳
const pickerDateToTimestamp = (pickerDate, targetTimezone) => {
  const localOffset = new Date().getTimezoneOffset();
  const targetOffset = getTimezoneOffset(targetTimezone, pickerDate);
  return pickerDate.getTime() - (localOffset + targetOffset) * 60000;
};

修正后的组件代码 #

把原有组件替换成下面的写法，TARGET_TIMEZONE换成需要指定的IANA格式时区标识即可，比如Asia/Shanghai（东八区）、America/Los_Angeles（太平洋时区）：

import { useState } from 'react';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

function TimeSelector() {
  // 配置项：指定目标时区
  const TARGET_TIMEZONE = 'Asia/Shanghai';
  // 原始毫秒时间戳（接口返回值）
  const initTimestamp = 1652905200000;
  const [selectedTime, setSelectedTime] = useState(initTimestamp);

  return (
    <DatePicker
      timeIntervals={5}
      onKeyDown={(e) => {
        e.preventDefault();
      }}
      timeCaption="time"
      dateFormat="h:mm aa"
      selected={timestampToPickerDate(selectedTime, TARGET_TIMEZONE)}
      onChange={(date) => {
        setSelectedTime(pickerDateToTimestamp(date, TARGET_TIMEZONE));
      }}
    />
  );
}

可选简化方案 #

如果项目中已经引入了date-fns依赖，可以直接用date-fns-tz的内置方法替换手写的转换函数，逻辑完全一致：

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

// selected传值：utcToZonedTime(selectedTime, TARGET_TIMEZONE)
// onChange取值：zonedTimeToUtc(date, TARGET_TIMEZONE).getTime()

注意事项 #

• 不要直接给selected属性传原始毫秒时间戳，JS原生Date对象内部存储的永远是UTC时间戳，默认输出时才会转本地时区，不做偏移校正一定会跟随浏览器时区变化
• 不要通过修改Date原型的方式强制改时区，会污染全局时间逻辑，引发项目中其他时间组件的显示异常
• 验证效果时可以手动修改操作系统的时区，无论切换到哪个地区，组件显示的时间、选中后存储的时间戳都应该和指定目标时区的时间一致，不会产生偏移。

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