使用管道将日期格式化为日/月/年

Question

我正在使用date管道来格式化我的日期，但如果没有解决方法，我就无法获得我想要的确切格式。我是误解了管道还是根本不可能？

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

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

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 }}

使用自定义管道的好处是，如果您将来想更新日期格式，您可以去更新您的自定义管道，它会反映每个地方。

自定义管道示例

Answer 2

从角度/公共导入DatePipe，然后使用以下代码：

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

其中userdate将是您的日期字符串。看看这是否有用。

记下日期和年份的小写：

d - date
M - month
y - year

编辑

您必须将区域设置字符串作为参数传递给 DatePipe，采用最新的角度。我已经在角度4.x中进行了测试

例如：

var datePipe = new DatePipe('en-US');

Answer 3

管道日期格式bug在Angular 2.0.0-rc.2中修复，此拉取请求。

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

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

当前版本：

示例角度13

旧版本：

角度 8.x.x 示例

示例角度7.x

< kbd >示例Angular 6.x

示例Angular 4. x

示例Angular 2. x

文档中的更多信息DatePipe