Angular 14中如何将Date时间戳转换为mm/dd/yyyy格式

错误原因 #

SimpleDateFormat是Java的日期格式化类，JavaScript/TypeScript环境中不存在这个API，这就是你遇到Cannot find name 'SimpleDateFormat'.ts(2304)错误的核心原因。

解决方案 #

方法1：使用Angular内置的DatePipe（推荐） #

Angular提供了官方的DatePipe管道，专门用于处理日期格式化，步骤如下：

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

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [DatePipe]
})
export class YourComponent implements OnInit {
  processStartDate: Date = new Date('Wed May 10 2023 05:30:00 GMT+0530');
  finalStartDate: string = '';

  constructor(private datePipe: DatePipe) {}

  ngOnInit(): void {
    // 调用transform方法完成格式化，第二个参数为目标格式
    this.finalStartDate = this.datePipe.transform(this.processStartDate, 'MM/dd/yyyy') || '';
  }
}

2. 若直接在模板中使用，无需注入，直接用管道语法：

<p>格式化后的日期：{{ processStartDate | date:'MM/dd/yyyy' }}</p>

方法2：原生JavaScript手动格式化 #

如果不想依赖Angular管道，可以用原生Date对象的方法手动拼接格式：

processStartDate: Date = new Date('Wed May 10 2023 05:30:00 GMT+0530');
finalStartDate: string = '';

ngOnInit(): void {
  // 月份从0开始，需+1，padStart确保两位数格式
  const month = String(this.processStartDate.getMonth() + 1).padStart(2, '0');
  const day = String(this.processStartDate.getDate()).padStart(2, '0');
  const year = this.processStartDate.getFullYear();
  this.finalStartDate = `${month}/${day}/${year}`;
}

方法3：使用第三方日期库（可选） #

如果需要处理更复杂的日期场景，可以使用date-fns这类轻量库：

1. 安装依赖：

npm install date-fns

2. 导入并使用：

import { format } from 'date-fns';

// ...
this.finalStartDate = format(this.processStartDate, 'MM/dd/yyyy');

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