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

Question

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

下面是代码

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

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


}

Answer 1

您可以在此处找到有关日期管道的更多信息,例如格式.

如果您想在组件中使用它,您可以这样做

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

现在,您可以简单地使用它的变换方法

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

Answer 2

同样有formatDate

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

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

陷阱：开箱即用，仅en-US受支持。

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

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

不要忘记添加相应的导入：

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

Answer 3

参考以下链接，

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 4

另一种选择是使用内置的 angular formatDate函数。我假设您使用的是反应式形式。这todoDate是模板中的日期输入字段。

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

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