我正在使用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,this Pull Request中修复。
现在我们可以做传统方式:
{{valueDate | date: 'dd/MM/yyyy'}}
当前版本:
旧版本:
如果任何人都希望在角度为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).
你也可以使用momentjs来做这类事情。 Momentjs最擅长在JavaScript中解析,验证,操作和显示日期。
我使用了Urish的这个管道,对我来说很好用:
https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts
在args参数中,您可以将日期格式设置为:“dd / mm / yyyy”
您可以找到有关日期管道here的更多信息,例如格式。
如果您想在组件中使用它,您可以这样做
pipe = new DatePipe('en-US'); // Use your own locale
现在,您可以简单地使用它的变换方法
const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');
从angular / common导入DatePipe然后使用以下代码:
var datePipe = new DatePipe();
this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');
userdate将是您的日期字符串。看看这是否有帮助。
记下日期和年份的小写:
d- date
M- month
y-year
编辑
您必须将locale
字符串作为参数传递给DatePipe,最新的角度。我已在角度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 }}
使用自定义管道的好处是,如果您希望将来更新日期格式,您可以更新自定义管道,它将反映每个地方。
当我因任何原因需要使用日期时,我总是使用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>
我正在使用这个临时解决方案:
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
对于纯dd / MM / yyyy,这对我有用,角度为2 beta 16:
{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
我认为这是因为语言环境被硬编码到DatePipe
中。看到这个链接:
现在无法通过配置更新此区域设置。
如果有人看时间和时区,这是给你的
{{data.ct | date :'dd-MMM-yy h:mm:ss a '}}
在日期和时间格式结束时为时区添加z
{{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}
在Angular 2中,日期管道在MacOS和iOS上的Safari浏览器的Typescript中表现不正常。我最近遇到了这个问题。我不得不在这里使用时刻j来解决问题。提到我所做的一切......
{{ convertDateToString(objectName.startDateTime) }}
import * as moment from 'moment';
convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}