在Angular 2中如何使用pipe道格式化date为dd / MM / yyyy？

我正在使用datepipe道来格式化我的date，但我只是不能得到确切的格式，我想要没有解决方法。 我是错误地理解pipe道还是不可能？

//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视图

Answer 1

pipe道date格式错误在Angular 2.0.0-rc.2中修复， 这个Pull请求 。

现在我们可以按照常规的方式：

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

---

例子：

当前版本：

Plunker Angular 5.x

---

下一个版本：

Plunker Angular 5.xx

---

旧版本：

Plunker Angular 2.x

Plunker Angular 4.x

---

更多信息在文档DatePipe

Answer 2

从angular / common导入DatePipe，然后使用下面的代码：

 var datePipe = new DatePipe(); this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy'); 

其中userdate将是您的datestring。 看看这是否有帮助。

记下date和年份的小写字母：

 d- date M- month y-year 

Answer 3

你可以通过一个简单的自定义pipe道来实现这一点。

 import { Pipe, PipeTransform } from '@angular/core'; import { DatePipe } from '@angular/common'; @Pipe({ name: 'dateFormatPipe', }) export class dateFormatPipe implements PipeTransform { transform(value: string) { var datePipe = new DatePipe("en-US"); value = datePipe.transform(value, 'dd/MM/yyyy'); return value; } } {{currentDate | dateFormatPipe }} 

使用自定义pipe道的优点是，如果您想要将来更新date格式，则可以去更新自定义pipe道，并且将反映每个位置。

自定义pipe道示例

Answer 4

当我需要使用date出于任何原因时，我总是使用Moment.js。

尝试这个：

 import { Pipe, PipeTransform } from '@angular/core' import * as moment from 'moment' @Pipe({ name: 'formatDate' }) export class DatePipe implements PipeTransform { transform(date: any, args?: any): any { let d = new Date(date) return moment(d).format('DD/MM/YYYY') } } 

并认为：

 <p>{{ date | formatDate }}</p> 

Answer 5

我正在使用这个临时解决scheme：

 import {Pipe, PipeTransform} from "angular2/core"; import {DateFormatter} from 'angular2/src/facade/intl'; @Pipe({ name: 'dateFormat' }) export class DateFormat implements PipeTransform { transform(value: any, args: string[]): any { if (value) { var date = value instanceof Date ? value : new Date(value); return DateFormatter.format(date, 'pt', 'dd/MM/yyyy'); } } } 

Answer 6

唯一的工作对我来说是从这里启发： https : //stackoverflow.com/a/35527407/2310544

对于纯日/月/年，这对我来说，有棱angular的2testing版16：

 {{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}} 

Answer 7

我认为这是因为语言环境硬编码到DatePipe 。 看到这个链接：

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

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

Answer 8

你也可以用这些东西来用momentjs。 Momentjs最好是在JavaScript中parsing，validation，操作和显示date。

我从Urish使用这个pipe道，对我来说工作得很好：

https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts

在args参数中，您可以将date格式设置为：“dd / mm / yyyy”