前端DateTimePicker传后端时差问题：如何正确传递选中时间？

你遇到的问题根源在于：JavaScript的Date对象在序列化为JSON发送给后端时，会自动转换为UTC时区的ISO格式字符串。你选中的是GMT+0200的本地时间，因此序列化后出现了2小时的时差。要传递选中的本地时间，需要手动处理Date对象，避免自动时区转换。

解决方案 #

方案1：手动构造本地时间字符串 #

直接提取Date对象的年、月、日等字段，拼接成后端需要的格式（比如YYYY-MM-DD HH:mm:ss）：

const handleCreatePlan = async () => {
  if(startTime && endTime) {
    // 格式化本地时间为指定字符串格式
    const formatLocalDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      // 可根据后端要求调整格式，比如"YYYY-MM-DDTHH:mm:ss"
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    let makeArrOfAllDatas: TCreateWorkersPlanClient[] = users.map((el) => {
      return ({
        user_id: el.user_id,
        start_time: formatLocalDate(startTime),
        end_time: formatLocalDate(endTime),
        lot_id,
        status: 1,
      })
    });

    await mutateAsync(makeArrOfAllDatas);
  }
};

方案2：生成带本地时区偏移的ISO字符串 #

如果后端支持带时区偏移的ISO格式，可手动构造符合要求的字符串：

const handleCreatePlan = async () => {
  if(startTime && endTime) {
    // 生成带本地时区偏移的ISO格式字符串
    const formatLocalISO = (date) => {
      const offset = date.getTimezoneOffset();
      const offsetHours = Math.floor(Math.abs(offset)/60);
      const offsetMinutes = Math.abs(offset)%60;
      const offsetSign = offset > 0 ? '-' : '+';
      // 计算本地时间对应的ISO基础部分，再拼接时区偏移
      const isoBase = new Date(date.getTime() - offset*60*1000).toISOString().slice(0, -1);
      return `${isoBase}${offsetSign}${String(offsetHours).padStart(2, '0')}:${String(offsetMinutes).padStart(2, '0')}`;
    };

    let makeArrOfAllDatas: TCreateWorkersPlanClient[] = users.map((el) => {
      return ({
        user_id: el.user_id,
        start_time: formatLocalISO(startTime),
        end_time: formatLocalISO(endTime),
        lot_id,
        status: 1,
      })
    });

    await mutateAsync(makeArrOfAllDatas);
  }
};

方案3：用日期库简化操作 #

如果项目已引入dayjs或moment，可直接用库的本地时间格式化能力：

import dayjs from 'dayjs';

const handleCreatePlan = async () => {
  if(startTime && endTime) {
    let makeArrOfAllDatas: TCreateWorkersPlanClient[] = users.map((el) => {
      return ({
        user_id: el.user_id,
        start_time: dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'),
        end_time: dayjs(endTime).format('YYYY-MM-DD HH:mm:ss'),
        lot_id,
        status: 1,
      })
    });

    await mutateAsync(makeArrOfAllDatas);
  }
};

注意事项 #

• 先确认后端期望的时间格式：是纯本地时间字符串、带时区偏移的ISO格式，还是其他规范；
• 如果后端要求存储UTC时间，但你需要传递的是选中本地时间对应的UTC值，那当前自动转换的结果是正确的——但显然你的需求是传递本地时间，因此以上方案适用。

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