我正在使用日期管道来格式化我的日期,但如果没有解决方案,我就无法得到我想要的确切格式。我理解管道是错误的还是不可能的?

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


当前回答

唯一对我有用的灵感来自于这里: https://stackoverflow.com/a/35527407/2310544

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

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

其他回答

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

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

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

例子:

当前版本:

Angular 13示例


旧版本:

示例:Angular 8.x.x

Angular 7.x示例

示例Angular 6.x

Angular 4.x

Angular 2.x示例


更多信息请参阅DatePipe文档

更新:

鉴于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')
      
   }
}

在视图中: {{date | formatDate}}

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

在项目中添加momentjs npm包。 在xyz.component.html下面,(注意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");
}

唯一对我有用的灵感来自于这里: https://stackoverflow.com/a/35527407/2310544

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

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

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

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

参考链接