React Calendar选中日期存入数据库少一天的跨时区问题

问题代码 #

import React, { useState, useEffect } from "react";
import style from "./step1.module.css";
import { Calendar } from "react-date-range";

function Step2({ onNextClick, step }) {
  const [date1, setDate1] = useState({ dateFilled: new Date().toJSON().split("T")[0] });
  const [date2, setDate2] = useState({ dateOfDeath: new Date().toJSON().split("T")[0] });

 //const [date1, setDate1] = useState({ dateFilled: new Date()});
 //const [date2, setDate2] = useState({ dateOfDeath: new Date()});

  const year = new Date(date1?.dateFilled + "T00:00:00").getFullYear();
  const month = new Date(date1?.dateFilled + "T00:00:00").getMonth();
  const day = new Date(date1?.dateFilled + "T00:00:00").getDate();
  const filledDate = new Date(year, month, day, 0, 0, 0, 0);
  //filledDate.setHours(0,0,0,0);

  const year1 = new Date(date2?.dateOfDeath + "T00:00:00").getFullYear();
  const month1 = new Date(date2?.dateOfDeath + "T00:00:00").getMonth();
  const day1 = new Date(date2?.dateOfDeath + "T00:00:00").getDate();
  const deathDate = new Date(year1, month1, day1, 0, 0, 0, 0);
  //deathDate.setHours(0,0,0,0);
  const values = { filledDate, deathDate };

  const onChange1 = (date) => {
    //const options = { timeZone : 'America/Los_Angeles'};
    setDate1({ dateFilled: JSON.stringify(date).slice(1, 11) });
    const dateA = { dateFilled: JSON.stringify(date).slice(1, 11) };
    const year = new Date(dateA?.dateFilled + "T00:00:00").getFullYear();
    const month = new Date(dateA?.dateFilled + "T00:00:00").getMonth();
    const day = new Date(dateA?.dateFilled + "T00:00:00").getDate();
    const newFilledDate = new Date(year, month, day, 0, 0, 0, 0) ;
    //newFilledDate.setHours(0,0,0,0);
    onNextClick({
      filledDate: newFilledDate || new Date(),
      newDeathDate: deathDate || new Date(),
    });
  };
  
  const onChangeDate  = (date) => {
    console.log(date.toISOString());
    setDate1({ dateFilled: date.toISOString() });
    const newFilledDate = date.toISOString();
    onNextClick({
      filledDate: newFilledDate || new Date(),
      newDeathDate: deathDate || new Date(),
    });
  };

  const onChange2 = (date) => {
    setDate2({ dateOfDeath: JSON.stringify(date).slice(1, 11) });
    const dateB = { dateOfDeath: JSON.stringify(date).slice(1, 11) };
    const year = new Date(dateB?.dateOfDeath + "T00:00:00").getFullYear();
    const month = new Date(dateB?.dateOfDeath + "T00:00:00").getMonth();
    const day = new Date(dateB?.dateOfDeath + "T00:00:00").getDate();
    const newDeathDate = new Date(year, month, day, 0, 0, 0, 0);
    //newDeathDate.setHours(0,0,0,0);
    onNextClick({
      filledDate: filledDate,
      newDeathDate: newDeathDate,
    });
  };
  return (
    <div className={style.step2Main}>
      <div className={style.calendarsCont}>
        <div className={style.calenderLeft}>
          <h4 className={style.dateHeading}>
            <p> Date Filed</p>
            {`${year}-${month + 1}-${day}`}
          </h4>
          <Calendar date={filledDate} dateDisplayFormat='yyyy-MM-dd' onChange={onChange1} />
        </div>
        <div className={style.calenderRight}>
          <h4 className={style.dateHeading}>
            <p> Date of Death</p>
            {`${year1}-${month1 + 1}-${day1}`}
          </h4>
          <Calendar date={deathDate} dateDisplayFormat='yyyy-MM-dd'  onChange={onChange2} />
        </div>
      </div>
    </div>
  );
}

export default Step2;

问题描述 #

这段代码实现双日期选择功能，在美国时区使用正常，但印度、菲律宾等时区用户操作时，选中的日期存入数据库会少一天（比如选7月4日，数据库存7月3日）。

初始代码中new Date()返回带当地时区的日期，即便移除时区信息，存库仍会少一天。若传ISO字符串给react-date-range的Calendar组件，会抛出「Invalid Interval」错误，该组件仅接受Date类型参数。

用户来自全球各地，大多选择往年/月的日期，要求选中的日期原样存库。试过转JSON格式、加"T00:00:00"后缀均无效，也不清楚为何选用react-date-range而非原生日期选择器，求解决办法。

解决方案 #

核心思路 #

问题根源是时区偏移：用户本地时区的0点Date对象，转成UTC字符串时会变成前一天的UTC时间，导致数据库存储偏差。解决逻辑是：

1. 用字符串存储用户选中的日期（yyyy-MM-dd），避免时区干扰
2. 给Calendar组件传本地时区0点的Date对象，满足组件参数要求
3. 传给后端时，转成UTC时区0点的Date对象或直接传日期字符串，确保存库日期与用户选中一致

修改后的代码 #

import React, { useState } from "react";
import style from "./step1.module.css";
import { Calendar } from "react-date-range";

function Step2({ onNextClick, step }) {
  // 直接存yyyy-MM-dd格式的日期字符串，规避时区问题
  const [filledDateStr, setFilledDateStr] = useState(new Date().toISOString().split("T")[0]);
  const [deathDateStr, setDeathDateStr] = useState(new Date().toISOString().split("T")[0]);

  // 给Calendar组件的Date对象：用本地时区0点创建，确保组件正常渲染
  const filledDate = new Date(`${filledDateStr}T00:00:00`);
  const deathDate = new Date(`${deathDateStr}T00:00:00`);

  const handleFilledDateChange = (date) => {
    // 提取用户选中的yyyy-MM-dd字符串
    const newDateStr = date.toISOString().split("T")[0];
    setFilledDateStr(newDateStr);
    // 传给父组件时转成UTC 0点的Date对象，保证存库日期正确
    onNextClick({
      filledDate: new Date(`${newDateStr}T00:00:00Z`),
      deathDate: new Date(`${deathDateStr}T00:00:00Z`)
    });
  };

  const handleDeathDateChange = (date) => {
    const newDateStr = date.toISOString().split("T")[0];
    setDeathDateStr(newDateStr);
    onNextClick({
      filledDate: new Date(`${filledDateStr}T00:00:00Z`),
      deathDate: new Date(`${newDateStr}T00:00:00Z`)
    });
  };

  // 解析日期字符串用于页面显示
  const [filledYear, filledMonth, filledDay] = filledDateStr.split("-").map(Number);
  const [deathYear, deathMonth, deathDay] = deathDateStr.split("-").map(Number);

  return (
    <div className={style.step2Main}>
      <div className={style.calendarsCont}>
        <div className={style.calenderLeft}>
          <h4 className={style.dateHeading}>
            <p>Date Filed</p>
            {`${filledYear}-${filledMonth}-${filledDay}`}
          </h4>
          <Calendar 
            date={filledDate} 
            dateDisplayFormat='yyyy-MM-dd' 
            onChange={handleFilledDateChange} 
          />
        </div>
        <div className={style.calenderRight}>
          <h4 className={style.dateHeading}>
            <p>Date of Death</p>
            {`${deathYear}-${deathMonth}-${deathDay}`}
          </h4>
          <Calendar 
            date={deathDate} 
            dateDisplayFormat='yyyy-MM-dd' 
            onChange={handleDeathDateChange} 
          />
        </div>
      </div>
    </div>
  );
}

export default Step2;

修改说明 #

• 状态层直接存储日期字符串，避免Date对象自带的时区偏移
• 创建Calendar组件的date参数时，用${dateStr}T00:00:00确保是用户本地时区的0点，满足组件参数要求且不报错
• 传给后端时，用${dateStr}T00:00:00Z创建UTC时区0点的Date对象，此时存库的UTC日期与用户选中的本地日期完全一致，不会出现少一天的情况；如果后端支持直接存储日期字符串，直接传字符串会更简单

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