Angular中如何将Unix时间戳转换为指定格式的日期时间？

你之前的代码仅提取了基础的年月日数值，没有处理星期几、英文月份全称、日期序数词（1st/2nd/3rd等）、12小时制上下午时段这几个核心要求，所以无法得到预期结果。下面是两种可直接落地的实现方式：

方式1：借助Angular内置DatePipe实现 #

首先在AppModule的providers数组中注册DatePipe：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePipe } from '@angular/common';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

在业务组件中注入并使用：

// 业务组件ts文件
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-your-component',
  templateUrl: './your.component.html'
})
export class YourComponent {
  deliveryDateFrom = 1632767400000;
  deliveryDateTo = 1632853799000;
  formattedDeliveryTime = '';

  constructor(private datePipe: DatePipe) {
    this.formattedDeliveryTime = this.formatDate(this.deliveryDateFrom, this.deliveryDateTo);
  }

  // 生成日期序数词（st/nd/rd/th）
  private getDaySuffix(day: number): string {
    if (day >= 11 && day <= 13) return 'th';
    switch (day % 10) {
      case 1: return 'st';
      case 2: return 'nd';
      case 3: return 'rd';
      default: return 'th';
    }
  }

  private formatDate(fromTs: number, toTs: number): string {
    const fromDate = new Date(fromTs);
    const toDate = new Date(toTs);

    // 用DatePipe格式化各部分
    const weekDay = this.datePipe.transform(fromDate, 'EEEE')!;
    const month = this.datePipe.transform(fromDate, 'MMMM')!;
    const day = fromDate.getDate();
    const fromTime = this.datePipe.transform(fromDate, 'ha')!.toLowerCase();
    const toTime = this.datePipe.transform(toDate, 'ha')!.toLowerCase();

    return `${weekDay} , ${month} ${day}${this.getDaySuffix(day)} Between ${fromTime} and ${toTime}`;
  }
}

方式2：封装自定义管道（多场景复用） #

如果多个页面需要用到该格式，可封装为自定义管道，使用更便捷：

1. 编写自定义管道代码

// delivery-date-format.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'deliveryDateFormat',
  standalone: true // Angular14+支持standalone，低版本需在模块的declarations中注册
})
export class DeliveryDateFormatPipe implements PipeTransform {
  private getDaySuffix(day: number): string {
    if (day >= 11 && day <= 13) return 'th';
    switch (day % 10) {
      case 1: return 'st';
      case 2: return 'nd';
      case 3: return 'rd';
      default: return 'th';
    }
  }

  transform(fromTimestamp: number, toTimestamp: number): string {
    const fromDate = new Date(fromTimestamp);
    const toDate = new Date(toTimestamp);
    
    // 手动映射周几和月份，不依赖DatePipe
    const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    const weekDay = weekDays[fromDate.getDay()];
    const month = months[fromDate.getMonth()];
    const day = fromDate.getDate();

    // 格式化12小时制时段
    const format12HTime = (date: Date) => {
      let hours = date.getHours();
      const ampm = hours >= 12 ? 'pm' : 'am';
      hours = hours % 12 || 12;
      return `${hours}${ampm}`;
    };
    const fromTime = format12HTime(fromDate);
    const toTime = format12HTime(toDate);

    return `${weekDay} , ${month} ${day}${this.getDaySuffix(day)} Between ${fromTime} and ${toTime}`;
  }
}

2. 模板中直接调用

<!-- 业务组件html文件 -->
<span>{{ deliveryDateFrom | deliveryDateFormat: deliveryDateTo }}</span>

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