使用管道将日期格式化为dd/MM/yyyy

我正在使用日期管道来格式化我的日期，但如果没有解决方案，我就无法得到我想要的确切格式。我理解管道是错误的还是不可能的?

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <h3>{{date | date: 'ddMMyyyy'}}, should be 
      {{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}</h3>

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
    this.date = new Date();
  }
}

plnkr view)

当前回答

在Angular 2.0.0-rc中修复了管道日期格式的错误。2，这个Pull Request。

现在我们可以用传统的方法:

{{valueDate | date: 'dd/MM/yyyy'}}

例子:

当前版本:

Angular 13示例

旧版本:

示例:Angular 8.x.x

Angular 7.x示例

示例Angular 6.x

Angular 4.x

Angular 2.x示例

更多信息请参阅DatePipe文档

2016-06-20 20:14:17

其他回答

您可以在这里找到有关日期管道的更多信息，例如格式。

如果您想在组件中使用它，可以简单地这样做

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

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

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

2018-09-04 12:47:53

在我的例子中，我在组件文件中使用:

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

// Use your preferred locale
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';

// ....

displayDate: string;
registerLocaleData(localeFr, 'fr');
this.displayDate = formatDate(new Date(), 'EEEE d MMMM yyyy', 'fr');

在组件HTML文件中

<h1> {{ displayDate }} </h1>

这对我来说很好;-)

2019-10-25 12:13:17

这对一些人来说可能很明显，但如果你想要这种日期格式

01.07.2022(在德国很常见)

你可以简单地这样做:

{{ myDate | date: "dd.MM.yyyy" }}

2022-07-14 15:19:29

我认为这是因为区域设置硬编码到DatePipe中。请看这个链接:

https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/date_pipe.ts

现在没有办法通过配置来更新这个区域设置。

2016-03-02 18:08:51

如果有人希望在angular 6中以上午或下午的时间显示日期，那么这是为你准备的。

{{date | date: 'dd/MM/yyyy hh:mm a'}}

输出

预定义格式选项

例子是用en-US语言给出的。

'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
'shortDate': equivalent to 'M/d/yy' (6/15/15).
'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
'shortTime': equivalent to 'h:mm a' (9:03 AM).
'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

参考链接

2018-09-17 21:31:16

使用管道将日期格式化为dd/MM/yyyy

推荐文章

最新文章

标签