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

我正在使用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();
}
}

< a href = " http://plnkr.co/edit/lK0Ip3y3nafK0PBi9vZ3?P =preview" rel="noreferrer">plnkr view .

896374 次浏览
小开

我认为这是因为地区是硬编码到DatePipe。请看这个链接:

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

小开

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

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');
}
}
}
小开
唯一对我有用的东西就是从这里得到的灵感: https://stackoverflow.com/a/35527407/2310544 < / p >

对于纯粹的dd/MM/yyyy，这对我来说是可行的，angular 2 beta 16:

\{\{ myDate | date:'d'}}/\{\{ myDate | date:'MM'}}/\{\{ myDate | date:'y'}}
小开

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

var datePipe = new DatePipe();
this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');
< p >, userdate 将是您的日期字符串。

注意小写的日期和年份:

d - date
M - month
y - year

编辑

你必须将locale字符串作为参数传递给DatePipe，在latest angular中。我已经在angular 4.x中进行了测试

例如:

var datePipe = new DatePipe('en-US');
小开
最佳答案

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

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

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

例子:

当前版本:

示例Angular 13

旧版本:

示例Angular 8.x.x

示例Angular 7.x . b

示例Angular 6.x .x

示例Angular 4.x .x

< a href = " http://plnkr.co/edit/K2K4kUrHGJsE3wUJxKeN?p=preview" rel="noreferrer">示例Angular 2.x . p=preview" rel="noreferrer">

< a href = " https://angular。io/api/common/DatePipe# DatePipe " rel="noreferrer">更多文档信息DatePipe . io/api/common/DatePipe# DatePipe " rel="noreferrer">

小开

你也可以使用momentjs来做这类事情。Momentjs最擅长用JavaScript解析、验证、操作和显示日期。

我使用了Urish的这个管道，它对我来说很好:

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

在args参数中，你可以输入日期格式，如:"dd/mm/yyyy"

小开

更新:

鉴于Moment.js已弃用，这个答案不再有效。目前，当我必须格式化一些日期，根据任务，我使用Javascript日期或date-fns是一个很好的替代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')
      

}
}
在视图中:

\{\{date | formatDate}}

. \{\{date | formatDate}

小开

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

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

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

自定义管道示例

小开

在MacOS和iOS上，使用Typescript for Safari浏览器的Angular 2中，日期管道行为不正确。我最近遇到了这个问题。我不得不在这里使用moment js来解决这个问题。简而言之，我所做的…

  1. 在项目中添加momentjs npm包。

  2. 在xyz.component.html下面，(注意startDateTime是数据类型字符串)

\{\{ convertDateToString(objectName.startDateTime) }}

  1. xyz.component.ts下,

import * as moment from 'moment';

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

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

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

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

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

你可以找到关于日期管道在这里的更多信息，比如格式。

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

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

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

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

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

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

输出

enter image description here

预定义格式选项

例子是用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).

< a href = " https://angular。io/api/common/DatePipe" rel="noreferrer">参考链接 . io/api/common/DatePipe" rel="noreferrer">参考链接 . io

小开

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

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>

这对我来说很好;-)

小开

角: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>

__abc0 09/06/1973 12:00 am

小开

您必须将区域设置字符串作为参数传递给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中添加datepipe

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 { }
小开

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

01.07.2022(在德国很常见)

你可以简单地这样做:

\{\{ myDate | date: "dd.MM.yyyy" }}
小开

在我的例子中，我使用的是格式为dd/MM/yyyy的日期字符串，并试图将其转换为不同的格式。

这个错误击中了我InvalidPipeArgument。

经过一些谷歌搜索，我发现日期字符串应该在ISO-recognized格式中。


提交答案