【问题标题】：Format date as dd/MM/yyyy using pipes使用管道将日期格式化为 dd/MM/yyyy
【发布时间】：2016-06-15 17:46:36
【问题描述】：

我正在使用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 view

【问题讨论】：

date 管道目前有几个问题。
这个候选版本仍然感觉有点未完成。这是我在 2 天内偶然发现的第二个问题。希望他们能尽快解决。为此创建自己的管道是一种选择，但感觉有点像重复..您可以在几个月内将其删除..
How to set locale in DatePipe in Angular2?的可能重复
格式：angular.io/api/common/DatePipe

标签： date angular angular-pipe date-pipe

【解决方案1】：

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

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

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

示例：

当前版本：

Example Angular 8.x.x

旧版本：

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

More info in documentation DatePipe

【讨论】：

谢谢，只是想附加有关 IE11++ 格式问题的其他提示，请参阅。 stackoverflow.com/questions/39728481/…
在 Angular 5 中，这显然已解决@boly38，请按照答案中的更新。我的问题答案链接：stackoverflow.com/a/46218711/2290538
我从 API 获取日期为 dob: "2019-02-05 00:00:00" 。我想删除 00:00:00 并且我有一个角度为 6 的模板驱动表单。我的输入字段在此处给出。 <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> 我该如何解决这个问题？
@FernandoLeal - 这太棒了。谢谢你。
这将无法翻译。

【解决方案2】：

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

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

在哪里 用户日期 将是您的日期字符串。看看这是否有帮助。

记下日期和年份的小写：

d - date
M - month
y - year

编辑

您必须以最新的角度将 locale 字符串作为参数传递给 DatePipe。我已经在 Angular 4.x 中测试过

例如：

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

【讨论】：

这个，不知为何显得很沉重。我们正在做同样的事情（关于变更检测），它占用了我们应用程序执行时间的 75%
对于 Angular 2.1.1，在 Supplied parameters do not match any signature of call target. new DatePipe() 上抛出此错误
你可以使用类似new DatePipe('en-US');
嗨，我想在 angular2 中使用相同的格式，比如 1 月 26 日，（我不想年份）怎么样？
HIPrashanth，我收到错误“未处理的承诺拒绝：没有 DatePipe 的提供者！ '。

【解决方案3】：

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

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

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

Custom Pipe examples

【讨论】：

【解决方案4】：

当我出于任何原因需要使用日期时，我总是使用 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>

【讨论】：

moment 库对于格式这样的小工作来说太大了！
@Oriana，不错的答案。我用这种方式； item.deferredStartDate = item.deferredStartDate ？时刻（item.deferredStartDate）.toDate（）：空；它与您的实现完全相同。

【解决方案5】：

如果有人看时间和时区，这是给你的

 {{data.ct | date :'dd-MMM-yy h:mm:ss a '}}

在日期和时间格式的末尾为时区添加 z

 {{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}

【讨论】：

【解决方案6】：

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

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');
        }
    }
}

【讨论】：

我是 Angular 2 的新手，在进行此操作时遇到了麻烦。我将它添加到它自己的 TS 文件中（编译为 js）。我尝试了几件事，包括将它添加为应用程序组件上的提供程序，然后在我的子组件的构造函数中，但我无法让它去。错误是； “找不到管道'dateFormat'”。你能给我一个关于如何实现这个的快速概述吗？这是我正在使用的包“依赖项”：{“angular2”：“2.0.0-beta.17”，“systemjs”：“0.19.25”，“es6-shim”：“^0.35.0”，“反射元数据”：“0.1.2”，“rxjs”：“5.0.0-beta.2”，“zone.js”：“0.6.10”}，
能否请您插入您的代码，我会进行更正。请使用最新版本的 angular2
@Deepakrao 这里的“pt”是什么？我如何在我的组件中调用这个管道？比如 let date=new DateFormat().transform(input);请纠正我。如果我想显示 hh:mm，即时间

【解决方案7】：

角度：8.2.11

<td>{{ data.DateofBirth | date }}</td>

输出： 1973 年 6 月 9 日

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy' }}</td>

输出： 09/06/1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy hh:mm a' }}</td>

输出： 09/06/1973 12:00 AM

【讨论】：

第二个和第三个例子一样，产生不同的输出？

【解决方案8】：

您必须将语言环境字符串作为参数传递给 DatePipe。

var ddMMyyyy = this.datePipe.transform(new Date(),"dd-MM-yyyy");

预定义格式选项：

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

在 app.component.module.ts 中添加日期管道

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DatePipe} from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    DatePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

【解决方案9】：

如果有人希望以 6 角在 AM 或 PM 中显示日期和时间，那么这是给你的。

{{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).

Reference Link

【讨论】：

【解决方案10】：

唯一对我有用的事情是从这里获得灵感的： https://stackoverflow.com/a/35527407/2310544

对于纯 dd/MM/yyyy，这对我有用，角度 2 beta 16：

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

【讨论】：

这是一个相当易读的 hack 测试版，不知道为什么它被否决但我会把它归零；）

【解决方案11】：

我认为这是因为语言环境被硬编码到 DatePipe 中。请参阅此链接：

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

目前无法通过配置更新此语言环境。

【讨论】：

链接已断开

【解决方案12】：

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

如果你想在你的组件中使用它，你可以简单地做

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

现在，您可以简单地使用它的变换方法，这将是

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

【讨论】：

【解决方案13】：

日期管道在 Angular 2 中与 MacOS 和 iOS 上的 Safari 浏览器的 Typescript 无法正常运行。我最近遇到了这个问题。我不得不在这里使用 moment js 来解决这个问题。简单地说一下我做了什么...

在你的项目中添加 momentjs npm 包。
在xyz.component.html下，（这里注意startDateTime是字符串数据类型）

{{ convertDateToString(objectName.startDateTime) }}

在 xyz.component.ts 下，

import * as moment from 'moment';

convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}

【讨论】：

如果您展示了与 momentjs 一起使用的代码，这将有所帮助，这样任何想尝试该解决方案的人都不必再弄明白。
用解决方案更新了我的评论。请检查。

【解决方案14】：

就我而言，我在组件文件中使用：

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>

它对我来说很好;-)

【讨论】：

【解决方案15】：

您也可以将 momentjs 用于此类事情。 Momentjs 最擅长在 JavaScript 中解析、验证、操作和显示日期。

我使用了 Urish 的这个管道，对我来说效果很好：

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

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

【讨论】：

链接已损坏，链接现在为github.com/urish/angular2-moment/blob/master/src/…