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

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

其他回答

在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");
}

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

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

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

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

这个错误让我震惊。

在谷歌搜索之后,我发现日期字符串应该是iso认可的格式。

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

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

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>

这对我来说很好;-)