Angular 2のDatePipe

Angular 2のdateパイプで日付のフォーマットを整理でき、DatePipeの引数に言語を指定すればその言語に対応した変換方式がりようできる。

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
  selector: 'app-root',
  template: `
  <p>{{now}}</p>
  <p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
  <p>{{ngDatePipeJp.transform(now, 'yMMdd (EEE) HHmm')}}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  now = new Date();
  ngDatePipeJp = new DatePipe('ja-JP');
}

これだと面倒くさいので独自のパイプdateJPを作成してみる。

date-jp.pipe.ts

import { Pipe } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({name: 'dateJP'})
export class DateJpPipe {
  private dateJpPipe: DatePipe;
  constructor() {
    this.dateJpPipe = new DatePipe('ja-JP');
  }
  transform(date, format) {
    return this.dateJpPipe.transform(date, format);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {DateJpPipe} from './date-jp.pipe';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
    DateJpPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
  selector: 'app-root',
  template: `
  <p>{{now}}</p>
  <p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
  <p>{{now| dateJP: 'yMMdd (EE) HHmm分'}}</p>
  `
})
export class AppComponent {
  now = new Date();
}

変換フォーマットが正直微妙なので下記のサイトを参考に曜日だけ日本語にするのがよいかと思う。

参考：DatePipe - ts - API - 公式リファレンス
参考：【Angular2】DatePipeの曜日だけ日本語にする【LiveDemoあり】 | Bucket.GIFT