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
タグ:Angular 2
【Angularの最新記事】
- Angularの構造ディレクティブ(St..
- AngularのRenderer2でDO..
- AngularでネイティブのDOMにアク..
- AngularでDirectiveの作成..
- Angularでカスタムパイプを作る
- AngularでURLのパラメーターを取..
- AngularでN文字以上をトリミング
- AngularでBehaviorSubj..
- Angularで「WARNING .. ..
- angularでdebounce
- angular cliで作ったプロジェク..
- Angular2でformControl..
- Angular2のloadChildre..
- ElementRef - @angula..
- Angular 2のng2-dragul..
- Angular2のRouting2
- Angular2のRouting
- Angular2のライフサイクルメソッド..
- Angular2のサービス
- Angular2のコンポーネント