React+JavaScript实现数据库日期按用户时区转换展示

一、优化提交函数（确保存储的日期准确） #

你当前的提交逻辑存在问题：把本地时间转成UTC的ISO字符串后存储，再拼接原时区，相当于存储的是UTC时间+原时区，而非用户实际提交的原时区本地时间。比如用户在America/Managua时区选了2023-04-11T14:50，转成ISOString会变成2023-04-11T18:50:00.000Z（Managua比UTC晚4小时），这会丢失用户提交的原始本地时间信息。

方案1：直接存储用户输入的本地时间+时区 #

如果不需要统一UTC基准，直接保留用户输入的原始时间更直观：

const handleOnBlur = useCallback(async (e, dirty) => {
  e.preventDefault();

  if (dirty) {
    if (test?.timeZone) {
      // 直接取用户输入的本地时间字符串，不转UTC
      const userInputDate = e.target.value;
      // 按要求格式存储：用户输入时间||提交时区
      await formValueSubmit(`${userInputDate}||${test.timeZone}`);
    } else {
      console.log('Timezone not available');
    }
  }
}, [formValueSubmit, test]);

方案2：存储UTC时间+原时区（统一时间基准） #

如果需要统一存储UTC时间，要先把用户输入的本地时间转换为对应时区的UTC时间，再存储：

const handleOnBlur = useCallback(async (e, dirty) => {
  e.preventDefault();

  if (dirty) {
    if (test?.timeZone) {
      const inputDateStr = e.target.value;
      // 将用户输入的时间解析为提交时区的Date对象
      const tzDate = new Date(`${inputDateStr} ${test.timeZone}`);
      // 转换为UTC的ISO字符串
      const utcDateStr = tzDate.toISOString();
      
      await formValueSubmit(`${utcDateStr}||${test.timeZone}`);
    } else {
      console.log('Timezone not available');
    }
  }
}, [formValueSubmit, test]);

二、根据当前用户时区展示日期 #

从数据库取出存储的字符串（如2023-04-11T14:50||America/Managua）后，按以下步骤转换为当前用户时区的展示格式：

实现代码示例 #

// 工具函数：转换存储的日期字符串为当前用户时区的展示格式
const formatDateForCurrentTimezone = (storedDateStr) => {
  if (!storedDateStr) return '';
  
  // 拆分日期和时区
  const [originalDateStr, submitTimezone] = storedDateStr.split('||');
  if (!originalDateStr || !submitTimezone) return '无效日期';
  
  // 自动获取当前用户的浏览器时区
  const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  
  // 自定义格式化选项，可根据需求调整
  const formatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    timeZoneName: 'short'
  };
  
  // 将原始日期解析为提交时区的时间，再格式化为当前时区的展示文本
  return new Intl.DateTimeFormat('zh-CN', {
    ...formatOptions,
    timeZone: currentTimezone
  }).format(new Date(`${originalDateStr} ${submitTimezone}`));
};

// 在React组件中使用
const DateDisplay = ({ storedDate }) => {
  const formattedDate = formatDateForCurrentTimezone(storedDate);
  return <div>{formattedDate}</div>;
};

关键说明 #

• 用Intl.DateTimeFormat是JS原生处理时区的标准方案，无需引入第三方库
• Intl.DateTimeFormat().resolvedOptions().timeZone可自动获取用户当前浏览器的时区
• 格式化选项可灵活调整，比如去掉timeZoneName只显示日期时间，或修改为YYYY-MM-DD HH:mm格式

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