Contents
- อ่านค่า Date() มาเก็บไว้ในตัวแปรสตริง แล้วเอาไปแสดงผล
- อ่านค่า วัน เดือน ปี
- ปรับเวลาตาม TimeZone
- ปรับแต่ง format การแสดงผล
1. อ่านค่า Date() มาเก็บไว้ในตัวแปรสตริง แล้วเอาไปแสดงผล
src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> {{st}} </ion-content> |
src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { st: String; stIso: String; stIso2: String; constructor(public navCtrl: NavController) { this.st = new Date().toString(); this.stIso = new Date().toISOString(); this.stIso2 = new Date().toISOString().slice(0, -1); console.log(this.st); console.log(this.stIso); console.log(this.stIso2); } } |
ผลลัพธ์
[code]
Fri Jul 06 2018 16:35:50 GMT+0700 (Indochina Time)
2018-07-06T09:35:50.271Z
2018-07-06T09:35:50.271
[/code]
บรรทัดที่ 3: เวลาไม่มี z ต่อท้าย
ได้ผลลัพธ์เวลาออกมาละ แต่เวลายังไม่ถูกต้องเนื่องจากยังไม่ได้ปรับ TimeZone
2. อ่านค่า วัน เดือน ปี
src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { monthNames: string[]; nbDate: number; nbMonth: number; stMonth: string; nbYear: number; constructor(public navCtrl: NavController) { let date = new Date(); this.monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; this.nbDate = date.getDate(); this.nbMonth = date.getMonth() + 1; this.stMonth = this.monthNames[date.getMonth()]; this.nbYear = date.getFullYear(); console.log("this.nbDate: ", this.nbDate); console.log("this.nbMonth: ", this.nbMonth); console.log("this.stMonth: ", this.stMonth); console.log("this.nbYear: ", this.nbYear); } } |
ผลลัพธ์ ทดสอบวันที่ 6 กรกฏาคม 2018
[code]
this.nbDate: 6
this.nbMonth: 7
this.stMonth: Jul
this.nbYear: 2018
[/code]
3. ปรับเวลาตาม TimeZone
src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { let date = new Date(); console.log(date.toISOString().slice(0,-1)); var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds let tzDate = new Date(Date.now() - tzoffset); console.log(tzDate.toISOString().slice(0,-1)); } } |
ผลลัพธ์
[code]
2018-07-06T09:45:22.738
2018-07-06T16:45:22.740
[/code]
ได้ผลลัพธ์เวลาออกมาถูกต้องละ
4. ปรับแต่ง format การแสดงผล
src/app/app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { DatePipe } from '@angular/common' @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, DatePipe, { provide: ErrorHandler, useClass: IonicErrorHandler } ] }) export class AppModule { } |
src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { DatePipe } from '@angular/common' @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { datePipe: DatePipe; constructor(public navCtrl: NavController, datePipe: DatePipe) { this.datePipe = datePipe; var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds let tzDate = new Date(Date.now() - tzoffset); let stDate = (tzDate).toISOString(); let stDate1 = this.datePipe.transform(stDate, 'yyyy MMM dd HH:mm:ss'); let stDate2 = this.datePipe.transform(stDate, 'yyyy-MM-dd'); console.log(stDate); console.log(stDate1); console.log(stDate2); } } |
บรรทัดที่ 23-24: datePipe.transform()
รับอินพุทเป็น string
และผลลัพธ์ก็เป็น string
ผลลัพธ์
[code]
2018-07-06T16:57:39.445Z
2018 Jul 06 23:57:39
2018-07-06
[/code]
ได้ผลลัพธ์เวลาออกมาตามฟอร์แมตละ
Display and Picker Formats
Format | Description | Example |
---|---|---|
YYYY |
Year, 4 digits | 2018 |
YY |
Year, 2 digits | 18 |
M |
Month | 1 … 12 |
MM |
Month, leading zero | 01 … 12 |
MMM |
Month, short name | Jan |
MMMM |
Month, full name | January |
D |
Day | 1 … 31 |
DD |
Day, leading zero | 01 … 31 |
DDD |
Day, short name | Fri |
DDDD |
Day, full name | Friday |
H |
Hour, 24-hour | 0 … 23 |
HH |
Hour, 24-hour, leading zero | 00 … 23 |
h |
Hour, 12-hour | 1 … 12 |
hh |
Hour, 12-hour, leading zero | 01 … 12 |
a |
12-hour time period, lowercase | am pm |
A |
12-hour time period, uppercase | AM PM |
m |
Minute | 1 … 59 |
mm |
Minute, leading zero | 01 … 59 |
s |
Second | 1 … 59 |
ss |
Second, leading zero | 01 … 59 |
Z |
UTC Timezone Offset | Z or +HH:mm or -HH:mm |
Link