我正在使用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();
}
}
在 Angular 2.0.0-rc.2 中修复了管道日期格式错误，此 Pull Request。
现在我们可以按照常规方式进行：
{{valueDate | date: 'dd/MM/yyyy'}}
当前版本：
旧版本：
从 angular/common 导入 DatePipe，然后使用以下代码：
var datePipe = new DatePipe();
this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');
其中 userdate 将是您的日期字符串。看看这是否有帮助。
记下日期和年份的小写字母：
d - date
M - month
y - year
编辑
您必须以locale最新的角度将字符串作为参数传递给 DatePipe。我已经在 Angular 4.x 中测试过
例如：
var datePipe = new DatePipe('en-US');
您可以通过一个简单的自定义管道来实现这一点。
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 }}
使用自定义管道的好处是，如果您想在将来更新日期格式，您可以去更新您的自定义管道，它将反映每个地方。
角度：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
更新：
鉴于 Moment.js 已被弃用，此答案不再有效。目前，当我必须格式化某个日期时，根据任务，我使用 Javascript Date 或者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')
}
}
在视图中：
{{ 日期 | 格式日期}}
如果有人看时间和时区，这是给你的
{{data.ct | date :'dd-MMM-yy h:mm:ss a '}}
在日期和时间格式末尾添加 z 表示时区
{{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}
我正在使用这个临时解决方案：
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');
}
}
}
您必须将语言环境字符串作为参数传递给 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 { }
如果有人希望以 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).
唯一对我有用的东西是从这里得到启发的： https ://stackoverflow.com/a/35527407/2310544
对于纯 dd/MM/yyyy，这对我有用，角度 2 beta 16：
{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
我认为这是因为语言环境被硬编码到DatePipe. 请参阅此链接：
现在无法通过配置更新此语言环境。
日期管道在 Angular 2 中与 MacOS 和 iOS 上的 Safari 浏览器的 Typescript 行为不正确。我最近遇到了这个问题。我不得不在这里使用 moment js 来解决问题。简而言之，我做了什么...
在您的项目中添加 momentjs npm 包。
xyz.component.html下，（注意这里startDateTime是数据类型字符串）
{{ convertDateToString(objectName.startDateTime) }}
import * as moment from 'moment';
convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}
您可以在此处找到有关日期管道的更多信息，例如格式。
如果你想在你的组件中使用它，你可以简单地做
pipe = new DatePipe('en-US'); // Use your own locale
现在，您可以简单地使用它的变换方法，这将是
const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');
就我而言，我在组件文件中使用：
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>
这对我来说可以 ;-）
您也可以将 momentjs 用于此类事情。Momentjs最擅长在 JavaScript 中解析、验证、操作和显示日期。
我使用了 Urish 的这个管道，它对我来说很好用：
https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts
在 args 参数中，您可以将日期格式设置为：“dd/mm/yyyy”