Angular中Epoch时间戳转日期的时区适配问题

你的问题出在代码使用了本地时区的日期提取方法：getDate()、getMonth()、getFullYear()会根据当前机器的时区返回对应时间的年月日。以时间戳1716246000000为例，它对应的UTC时间是2024-05-21 00:00:00，但夏威夷时区（UTC-10）的本地时间是2024-05-20 14:00:00，所以getDate()会返回20，导致显示错误。

修正方案1：手动使用UTC方法提取日期 #

直接使用JavaScript Date对象的UTC系列方法，强制基于UTC时区提取年月日：

const monthNames = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
const dt = new Date(tempModel.endDate);
// 用UTC方法获取年月日，不受本地时区影响
const utcDay = dt.getUTCDate();
const utcMonthIndex = dt.getUTCMonth();
const utcYear = dt.getUTCFullYear();
// 构造需要的日期字符串（无需再转成Date对象，避免再次受时区影响）
tempModel.endDate = `${utcDay} ${monthNames[utcMonthIndex]} ${utcYear}`;

修正方案2：使用Angular DatePipe（推荐） #

Angular提供的DatePipe可以直接指定时区格式化日期，更符合框架最佳实践，无需手动维护月份数组：

1. 首先在模块中导入CommonModule（已包含DatePipe）：

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule]
})
export class YourModule {}

2. 在组件中注入并使用DatePipe：

import { DatePipe } from '@angular/common';

@Component({
  // 组件配置
})
export class YourComponent {
  constructor(private datePipe: DatePipe) {}

  // 处理日期的方法
  formatEndDate(tempModel: any) {
    // 指定UTC时区，格式为"dd MMM yyyy"
    tempModel.endDate = this.datePipe.transform(tempModel.endDate, 'dd MMM yyyy', 'UTC');
  }
}

这样不管机器切换到哪个时区，都会基于UTC时间戳显示正确的日期（21 May 2024）。

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