Angularでpipeを使って日付データをフォーマットする
1
準備
標準機能なので追加のインストールは必要ありません．module.tsで@angular/commonからDatePipeをインストールし，providersに登録します．
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab3Page } from './tab3.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+import { DatePipe } from '@angular/common';
import { Tab3PageRoutingModule } from './tab3-routing.module';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
ExploreContainerComponentModule,
RouterModule.forChild([{ path: '', component: Tab3Page }]),
Tab3PageRoutingModule,
],
- declarations: [Tab3Page]
+ declarations: [Tab3Page],
+ providers: [DatePipe]
})
export class Tab3PageModule {}
次に，page.tsファイルで読み込みます．
import { Component,ElementRef,ViewChild } from '@angular/core';
+import { DatePipe } from '@angular/common';
@Component({
selector: 'app-tab3',
templateUrl: 'tab3.page.html',
styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
constructor(
+ private datePipe: DatePipe
) {
}
ionViewDidEnter(){
}
}
HTMLでの表示を変えたい場合
import { Component,ElementRef,ViewChild } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-tab3',
templateUrl: 'tab3.page.html',
styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
+ time_on_html:any;
constructor(
private datePipe: DatePipe
) {
}
ionViewDidEnter(){
+ this.time_on_html = new Date();
+ console.log(this.time_on_html);
}
}
そして，HTML側は{{time_on_html | date:”MM/dd/yy” }}で参照します．
tsファイルの中で表示を変えたい場合
import { Component,ElementRef,ViewChild } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-tab3',
templateUrl: 'tab3.page.html',
styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
time_on_html:any;
constructor(
private datePipe: DatePipe
) {
}
ionViewDidEnter(){
this.time_on_html = this.datePipe.transform(new Date(), 'yyyyMMddHHmmss');
console.log(this.time_on_html);
}
}
2021/07/19 18:42:52と表示される．
