如何在React Rainbow DateTimePicker的onChange中强制使用EST时区

方案1：直接使用组件的timeZone属性（推荐） #

Rainbow DateTimePicker底层基于react-datepicker，原生支持timeZone属性。直接指定该属性为"America/New_York"，即可强制组件全程使用EST时区渲染、解析时间，无需手动处理字符串格式。

修改后的代码：

import './style.css';
import { useState } from 'react';
import DateTimePicker from 'react-rainbow-components/components/DateTimePicker';

export default function App() {
  // 初始状态存储原始Date对象（内部为UTC时间，组件会自动转换为EST显示）
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <div className="App">
      <DateTimePicker
        value={selectedDate}
        minDate={new Date(2022, 0, 4)}
        maxDate={new Date()}
        locale="en-US"
        timeZone="America/New_York" // 核心配置：强制使用EST时区
        label="DateTimePicker Label"
        onChange={(value) => setSelectedDate(value)}
      />
    </div>
  );
}

说明：设置timeZone后，组件会自动以EST时区渲染时间，onChange返回的Date对象会对应EST时间的UTC值（例如在IST时区选择EST的2024-05-20 10:00，返回的Date内部存储的是UTC2024-05-20 14:00，符合时区转换逻辑）。若需要显示EST格式的字符串，再用toLocaleString指定时区即可。

方案2：手动处理时区转换（适配旧版本组件） #

如果使用的Rainbow组件版本不支持timeZone属性，可以通过手动转换时区字符串来保证一致性：

import './style.css';
import { useState } from 'react';
import DateTimePicker from 'react-rainbow-components/components/DateTimePicker';

// 将Date对象转换为EST时区的标准格式字符串
const convertToESTString = (date) => {
  return new Intl.DateTimeFormat('en-US', {
    timeZone: 'America/New_York',
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  }).format(date);
};

// 将EST格式字符串转换为Date对象（强制按EST时区解析）
const parseESTStringToDate = (estString) => {
  const [datePart, timePart] = estString.split(', ');
  return new Date(`${datePart} ${timePart} EST`);
};

export default function App() {
  // 状态存储EST格式的时间字符串
  const [selectedESTDate, setSelectedESTDate] = useState(convertToESTString(new Date()));

  const handleChange = (value) => {
    // 将组件返回的本地时区Date转换为EST字符串存入状态
    setSelectedESTDate(convertToESTString(value));
  };

  return (
    <div className="App">
      <DateTimePicker
        value={parseESTStringToDate(selectedESTDate)} // 转换为Date对象供组件渲染
        minDate={new Date(2022, 0, 4)}
        maxDate={new Date()}
        locale="en-US"
        label="DateTimePicker Label"
        onChange={handleChange}
      />
    </div>
  );
}

说明：

• 用convertToESTString将任意Date对象转为EST时区的标准字符串，确保状态存储的是明确的EST时间；
• 用parseESTStringToDate给EST字符串添加时区标识，避免组件用本地时区解析导致偏差；
• onChange时将组件返回的本地Date转为EST字符串，保证状态始终与EST时区绑定。

关键注意事项 #

• 避免直接使用无时区标识的格式化字符串作为value：这类字符串没有时区信息，组件会默认用本地时区解析，必然导致时区偏差；
• Date对象本质是UTC时间戳：无论时区如何，Date内部存储的都是毫秒数，显示和解析时指定时区即可保证一致性。

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