Angular中如何获取单独的年、月、日？使用new Date()未达预期

嘿，这个问题我熟！在Angular里想要只获取年、月、日，有两种很实用的方法，我给你详细讲讲：

方法一：原生JavaScript手动提取 #

直接通过Date对象的方法提取年、月、日，再拼接成你需要的格式：

const today = new Date();
// 获取年份
const year = today.getFullYear();
// 获取月份（注意：月份是0索引，所以要+1，再用padStart补零成两位）
const month = String(today.getMonth() + 1).padStart(2, '0');
// 获取日期，同样补零保证两位格式
const day = String(today.getDate()).padStart(2, '0');

// 拼接成你需要的格式，比如YYYY-MM-DD
const dateOnly = `${year}-${month}-${day}`;
console.log(dateOnly); // 输出示例："2024-05-20"

小提示：如果不需要补零，直接去掉.padStart(2, '0')就行，比如月份会显示成5而不是05。

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

Angular自带了DatePipe，专门用来格式化日期，在Angular项目里用这个更规范，也更灵活：

步骤1：确保模块导入了CommonModule #

DatePipe属于@angular/common，所以要在你的组件所属的模块（比如AppModule或者自定义的共享模块）里导入CommonModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 其他导入...

@NgModule({
  imports: [CommonModule],
  // 其他配置...
})
export class YourModule { }

方式A：在组件类中使用 #

先注入DatePipe，再调用transform方法格式化日期：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [DatePipe] // 注入DatePipe
})
export class YourComponent {
  dateOnly: string;

  constructor(private datePipe: DatePipe) {
    const today = new Date();
    // 传入日期和格式字符串，这里用'yyyy-MM-dd'表示年-月-日
    this.dateOnly = this.datePipe.transform(today, 'yyyy-MM-dd') || '';
    // 你也可以换成其他格式，比如'MM/dd/yyyy'或者'yyyy年MM月dd日'
  }
}

方式B：直接在模板中使用管道 #

更简单的方式是在模板里直接用| date管道：

<!-- 组件模板里的代码 -->
<p>今天的日期：{{ today | date:'yyyy-MM-dd' }}</p>

然后在组件类里定义today变量：

// 组件类中
today = new Date();

这样就能轻松得到仅含年、月、日的日期啦！

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