如何在Angular中将英国时间转换为GMT时间及时区处理方案

英国时间转GMT的具体实现 #

英国时区包含GMT（标准时间）和BST（夏令时，每年3-10月），转换时必须考虑夏令时的自动切换，推荐使用专业时区库而非原生Date API，以下是两种可行方案：

方案1：使用Luxon库（推荐） #

Luxon对IANA时区的支持非常完善，能自动处理夏令时：

1. 安装依赖：

npm install luxon

2. 转换代码示例：

import { DateTime } from 'luxon';

// 假设用户输入英国时间为"08:30"，选中时区为"Europe/London"
const localTime = DateTime.fromFormat('08:30', 'HH:mm', { zone: 'Europe/London' });
const gmtTime = localTime.setZone('GMT');
// 转换为数据库存储的时分格式
const gmtTimeStr = gmtTime.toFormat('HH:mm');
// 夏令时输出"07:30"，非夏令时输出"08:30"

方案2：原生Date API实现 #

原生API需要手动处理时区偏移，可靠性略低，适合简单场景：

// 用户输入的时分：8点30分
const inputHours = 8;
const inputMinutes = 30;

// 创建英国时区的日期实例（利用当前日期获取时区偏移）
const londonDate = new Date(new Date().toLocaleString('en-US', { timeZone: 'Europe/London' }));
londonDate.setHours(inputHours, inputMinutes, 0, 0);

// 获取对应的GMT（UTC）时间
const gmtHours = londonDate.getUTCHours();
const gmtMinutes = londonDate.getUTCMinutes();
const gmtTimeStr = `${gmtHours.toString().padStart(2, '0')}:${gmtMinutes.toString().padStart(2, '0')}`;

整体场景的完整解决方案建议 #

针对你需要支持英印两地时区输入、转GMT存储、展示本地时间的场景，推荐以下流程：

• 明确时区选择：给用户提供IANA标准时区选项，即Europe/London（英国）和Asia/Kolkata（印度），避免模糊表述，确保时区识别准确。
• 规范时间输入：使用Angular原生input[type="time"]或Angular Material的MatTimepicker组件，限制用户输入合法的时分格式，减少转换异常。
• 转换与存储逻辑：
  1. 用户选定时区并输入时间后，将输入的时分结合选中时区，转换为GMT（UTC）时分，存入数据库（推荐存储时分字符串如"08:30"或分钟数如510，便于后续计算）。
  2. 从数据库读取GMT时间后，根据对应办公室的时区，转换回本地时间再展示在表格中（比如印度办公室的GMT时间03:00转印度时间为08:30）。
• 夏令时兼容：强制使用支持IANA时区的库（如Luxon、date-fns-tz），自动处理英国夏令时的时区偏移变化，避免手动计算出错。
• 展示优化：表格中直接展示对应办公室的本地时间（如英国办公室显示08:30 - 17:30），无需让用户感知GMT转换过程。

内容的提问来源于stack exchange，提问作者hanushi-thana