JavaScript合并本地时间日期转UTC日期问题（卡拉奇时区）

开发日历应用时，需要将选择的事件起始日期（如7月31日）搭配卡拉奇时区的班次时间（如22:00-23:00）转换为UTC格式。当前转换逻辑在处理12点后的班次时间时会出现日期偏移，无法得到正确的UTC时间（期望结果如2024-08-02T17:00:00.000Z对应卡拉奇的22:00）。

现有代码中，将班次时间与事件日期拼接后直接创建Date对象，会默认使用运行环境的本地时区解析，而非目标的卡拉奇时区，导致转换结果错误。

由于卡拉奇时区（PKT）为固定的UTC+5（无夏令时切换），可以通过两种可靠方式实现正确转换：

方法1：手动计算UTC时间（兼容性最好） #

直接基于事件日期的UTC日期，结合卡拉奇时区偏移反向计算UTC时间：

convertShiftsToZonedTime(shifts, eventStartDate) {
  // 解析事件起始的UTC日期，提取UTC维度的年、月、日
  const eventDateUTC = new Date(eventStartDate);
  const utcYear = eventDateUTC.getUTCFullYear();
  const utcMonth = String(eventDateUTC.getUTCMonth() + 1).padStart(2, '0');
  const utcDay = String(eventDateUTC.getUTCDate()).padStart(2, '0');
  const utcDateString = `${utcYear}-${utcMonth}-${utcDay}`;

  return shifts.map(shift => {
    // 拆分班次时间的小时和分钟
    const [startHour, startMinute] = shift.startTime.split(':').map(Number);
    const [endHour, endMinute] = shift.endTime.split(':').map(Number);

    // 卡拉奇时间 = UTC时间 +5小时 → UTC时间 = 卡拉奇时间 -5小时
    const karachiStart = new Date(Date.UTC(utcYear, utcMonth - 1, utcDay, startHour, startMinute));
    const utcStart = new Date(karachiStart.getTime() - 5 * 60 * 60 * 1000);

    const karachiEnd = new Date(Date.UTC(utcYear, utcMonth - 1, utcDay, endHour, endMinute));
    const utcEnd = new Date(karachiEnd.getTime() - 5 * 60 * 60 * 1000);

    return {
      ...shift,
      startTime: utcStart.toISOString(),
      endTime: utcEnd.toISOString()
    };
  });
}

方法2：使用Intl.DateTimeFormat解析卡拉奇时区（更直观） #

利用现代浏览器支持的时区API，明确指定卡拉奇时区解析时间后转换为UTC：

convertShiftsToZonedTime(shifts, eventStartDate) {
  const eventDateUTC = new Date(eventStartDate);
  const utcYear = eventDateUTC.getUTCFullYear();
  const utcMonth = String(eventDateUTC.getUTCMonth() + 1).padStart(2, '0');
  const utcDay = String(eventDateUTC.getUTCDate()).padStart(2, '0');
  const karachiDateString = `${utcYear}-${utcMonth}-${utcDay}`;

  return shifts.map(shift => {
    // 构造卡拉奇时区的时间字符串并解析
    const parseKarachiTime = (timeStr) => {
      const [hour, minute] = timeStr.split(':').map(Number);
      const formatter = new Intl.DateTimeFormat('en-US', {
        timeZone: 'Asia/Karachi',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      });
      const parts = formatter.formatToParts(new Date(Date.UTC(utcYear, utcMonth -1, utcDay, hour, minute)));
      const dateObj = {};
      parts.forEach(part => { dateObj[part.type] = part.value; });
      return new Date(`${dateObj.year}-${dateObj.month}-${dateObj.day}T${dateObj.hour}:${dateObj.minute}:00`);
    };

    const karachiStart = parseKarachiTime(shift.startTime);
    const karachiEnd = parseKarachiTime(shift.endTime);

    return {
      ...shift,
      startTime: karachiStart.toISOString(),
      endTime: karachiEnd.toISOString()
    };
  });
}

• 方法1无需依赖额外API，兼容性覆盖所有浏览器，适合需要兼容旧环境的场景；
• 方法2通过明确指定Asia/Karachi时区，逻辑更清晰，适合现代浏览器环境；
• 核心是确保班次时间被解析为卡拉奇时区的时间后再转换为UTC，避免使用运行环境的本地时区导致偏移。

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