Angular 4 + TypeScript下Safari浏览器日期显示异常问题

这个问题我之前踩过坑！Safari对ISO日期的解析确实有点“较真”，咱们用Angular 4自带的DatePipe处理2018-04-12T18:00:00这种不带时区标识的日期时，Chrome、Firefox、Edge会默认按本地时间解析，但Safari严格遵循标准，会把它当成UTC时间处理，这就导致了格式化结果不一致。

下面给你两个不用第三方库的简化解决办法：

方案1：写个超轻量的兼容自定义管道 #

不用引入任何外部依赖，基于Angular自带的DatePipe封装一层，先把日期字符串转成Safari能正确识别的格式：

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'safeDate'
})
export class SafeDatePipe implements PipeTransform {
  constructor(private datePipe: DatePipe) {}

  transform(value: string, format: string): string {
    if (!value) return '';
    // 给无时区的ISO日期末尾加Z，统一按UTC解析（如果业务需要本地时间，可调整逻辑）
    const safeDateStr = value.includes('Z') ? value : `${value}Z`;
    const validDate = new Date(safeDateStr);
    // 复用原生DatePipe做格式化
    return this.datePipe.transform(validDate, format) || '';
  }
}

模板里直接替换成这个管道：

{{ model.event.startDate | safeDate : "h:mm a" }}

方案2：组件内直接预处理日期 #

如果不想新增管道，也可以在组件里提前把日期转成合法的Date对象：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private datePipe: DatePipe) {}

  get formattedStartDate(): string {
    const rawDate = this.model.event.startDate;
    if (!rawDate) return '';
    // Safari兼容处理：把T替换成空格，让原生Date构造函数正确识别
    const safeDate = new Date(rawDate.replace('T', ' '));
    return this.datePipe.transform(safeDate, 'h:mm a') || '';
  }
}

模板里直接用处理后的属性：

{{ formattedStartDate }}

额外小建议 #

如果能协调后端修改API，让返回的日期字符串带时区标识（比如2018-04-12T18:00:00Z或2018-04-12T18:00:00+08:00），那所有浏览器都会统一解析，直接用原生DatePipe就完全没问题了。

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