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

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


当前回答

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

其他回答

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

对于纯粹的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');

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

注意小写的日期和年份:

d - date
M - month
y - year

EDIT

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

例如:

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

您可以在这里找到有关日期管道的更多信息,例如格式。

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

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

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

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

我认为这是因为区域设置硬编码到DatePipe中。请看这个链接:

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

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

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

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

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

自定义管道示例