home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public event = { date: 'now', time: 'now' } constructor(public navCtrl: NavController) { } } |
บรรทัดที่ 10-12: ประการศตัวแปร event
ที่มีสมาชิกภายในเป็น date
และ time
Note: จริงๆจะปรากาศตัวแปร date
และ time
แยกอิสระจากกันก็ได้ ไม่ต้องรวมกันไว้ใน ตัวแปร event
home.html
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 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> The world is your oyster. <p> If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. </p> <ion-list > <ion-item style="padding:0 16px;"> <ion-label>Date</ion-label> <ion-datetime displayFormat="DD MMM YYYY" [(ngModel)]="event.date"></ion-datetime> </ion-item> <ion-item style="padding:0 16px;"> <ion-label>Time</ion-label> <ion-datetime displayFormat="HH:mm" [(ngModel)]="event.time"></ion-datetime> </ion-item> </ion-list> </ion-content> |
บรรทัดที่ 18: ผูกตัวแปร event.date
เข้ากับ ion-datetime
และกำหนดรูปแบบที่ใช้แสดง
บรรทัดที่ 23: ผูกตัวแปร event.time
เข้ากับ ion-datetime
และกำหนดรูปแบบที่ใช้แสดง
Link