使用管道将日期格式化为 dd/MM/yyyy [英] Format date as dd/MM/yyyy using pipes

问题描述

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

//我们的根应用组件从 'angular2/core' 导入 {Component}@成分({选择器:'我的应用'，提供者:[]，模板:`<div><h2>你好{{name}}</h2><h3>{{日期 |日期:'ddMMyyyy'}}，应该是{{日期 |日期:'dd'}}/{{date |日期:'MM'}}/{{日期 |日期:'yyyy'}}</h3>

`，指令:[]})出口类应用{构造函数(){this.name = 'Angular2'this.date = new Date();}}

plnkr 视图

解决方案

在 Angular 2.0.0-rc.2 中修复管道日期格式错误，这个拉取请求.

现在我们可以按照常规方式进行:

{{valueDate |日期:'dd/MM/yyyy'}}

---

示例:

当前版本:

Angular 8.xx 示例

---

旧版本:

Angular 7.x 示例

Angular 6.x 示例

Angular 4.x 示例

Angular 2.x 示例

---

<块引用>

文档中的更多信息DatePipe

I'm using the date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible?

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

解决方案

Pipe date format bug fixed in Angular 2.0.0-rc.2, this Pull Request.

Now we can do the conventional way:

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

---

Examples:

Current Version:

Example Angular 8.x.x

---

Old Versions:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

---

More info in documentation DatePipe

这篇关于使用管道将日期格式化为 dd/MM/yyyy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！