Question

我是角色的新手，并希望在组件ngOnInit方法中格式化日期。我已经看到一些使用管道运算符来格式化数据的例子，但我不知道如何在组件文件中格式化日期。

下面是代码

export class DashboardComponent implements OnInit {
  formatdate = 'dd/MM/yyyy';
  constructor(private auth: AuthService) { }

  ngOnInit() {
    console.log(new Date().toISOString())
  }


}

Answer 1

您可以找到 more information about the date pipe here ，例如格式。

如果要在组件中使用它，只需执行

即可

pipe = new DatePipe('en-US'); // Use your own locale

现在，你可以简单地使用它的变换方法，它将是

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');

Answer 2

请参阅下面的链接

https://angular.io/api/common/DatePipe

**Code Sample**

@Component({
 selector: 'date-pipe',
 template: `<div>
   <p>Today is {{today | date}}</p>
   <p>Or if you prefer, {{today | date:'fullDate'}}</p>
   <p>The time is {{today | date:'h:mm a z'}}</p>
 </div>`
})
// Get the current date and time as a date-time value.
export class DatePipeComponent {
  today: number = Date.now();
}

{{今天|日期：'MM / dd / yyyy'}} 输出：17/09/2019

或

{{今天|日期：'shortDate'}} 输出：17/9/19

Answer 3

同样有[formatDate] [1] https://angular.io/api/common/formatDate

const format = 'dd/MM/yyyy';
const myDate = '2019-06-29';
const locale = 'en-US';
const formattedDate = formatDate(myDate, format, locale);

根据API，它将日期字符串，Date对象或时间戳作为参数。

Gotcha：开箱即用，仅支持en-US。

如果需要添加其他语言环境，则需要添加它并将其注册到app.module中，例如西班牙语：

import localeES from "@angular/common/locales/es";
registerLocaleData(localeES, "es");

别忘了添加相应的导入：

import { formatDate } from "@angular/common";

Answer 4

可以使用内置的角度formatDate功能。我假设您正在使用反应形式。这里的todoDate是模板中的日期输入字段。

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

this.todoForm.controls.todoDate.setValue(formatDate(this.todo.targetDate, 'yyyy-MM-dd', 'en-US'));

如何在角度为5的Component中格式化日期

4 个答案: