Ionicのion-datetimeで日付を入力・保存する方法についてまとめました。
## 【ion-datetime】日付の入力・保存
Ionicのion-datetimeで日付を入力・保存していきます。
ホームテンプレートを次のように編集します。
## 【ホーム画面】
home.html
■src/pages/home/home.html
<ion-header> <ion-navbar color="primary"> <ion-title> メモ帳 </ion-title> <ion-buttons end> <button ion-button icon-only (click)="createItem()"> <ion-icon name="add"></ion-icon> </button> </ion-buttons> <ion-buttons end> <button ion-button (click)="toggle()"> 並び替え </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content padding> <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)"> <ion-item *ngFor="let item of items" (click)="editItem(item)"> {{item.date}} <button ion-button color="danger" item-end (click)="deleteItem(item)"> <ion-icon name="trash"></ion-icon> </button> </ion-item> </ion-list> </ion-content>
■src/pages/home/home.ts
import { Component } from '@angular/core'; import { NavController, ModalController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { InputItemPage } from '../input-item/input-item'; import { reorderArray } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public items = []; isReordering: boolean = false; // コンストラクタ constructor(public navCtrl: NavController, public modalCtrl: ModalController, private storage: Storage) { } ionViewDidLoad() { this.storage.get('items').then((items) => { this.items = items ? items : []; }); this.storage.ready().then(() => { }); } // アイテムの作成 createItem() { let addModal = this.modalCtrl.create(InputItemPage); addModal.onDidDismiss((item) => { if(item) { // 入力があれば追加 this.items.push(item); this.updateStorageData(); } }); // モーダルの表示 addModal.present(); } // アイテムの編集 editItem(item) { const index = this.items.indexOf(item); // モーダルの生成 let editItem = this.modalCtrl.create(InputItemPage, { item: item }); // 閉じられた時の処理 editItem.onDidDismiss((item) => { if(item) { this.items[index] = item; this.updateStorageData(); } }); // モーダルの表示 editItem.present(); } // アイテムの削除 deleteItem(item) { const index = this.items.indexOf(item); this.items.splice(index, 1); this.updateStorageData(); } // ストレージのデータ更新 updateStorageData() { this.storage.set('items', this.items).then(() => { }); } // トグルスイッチ toggle() { this.isReordering = !this.isReordering; } // 並べ替え後の処理 reorder(indexes: any) { // itemsの要素の順番を更新 this.items = reorderArray(this.items, indexes); // ストレージのデータ更新 this.updateStorageData(); } }
## 【入力画面】
■src/pages/input-item/input-item.html
<ion-header> <ion-navbar color="primary"> <ion-navbar> <ion-title>データ登録</ion-title> </ion-navbar> <ion-buttons end> <button ion-button icon-only (click)="close()"> <ion-icon name="close"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content padding> <ion-item> <ion-datetime displayFormat="YYYY年M月D日" doneText="OK" cancelText="キャンセル" placeholder="日付を選択" [(ngModel)]="startDateInput"></ion-datetime> </ion-item> <button full ion-button color="primary" (click)="saveItem()">保存</button> </ion-content>
■src/pages/input-item/input-item.ts
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-input-item', templateUrl: 'input-item.html', }) export class InputItemPage { public date: string; // コンストラクタ constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) { } // ページがロードされたときの処理 ionViewDidLoad() { let item = this.navParams.get('item'); if (item) { this.date = item.date; } } // アイテムの保存(保存ボタン押下後の処理) saveItem() { let inputItem = { date: this.date, memo: "aaa" }; // 入力された値を閉じる際に返す this.viewCtrl.dismiss(inputItem); } // 閉じるボタン押下後の処理 close() { this.viewCtrl.dismiss(); } }
■app/app.module.ts
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 { IonicStorageModule } from '@ionic/storage'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { InputItemPage } from '../pages/input-item/input-item'; @NgModule({ declarations: [ MyApp, HomePage, InputItemPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), IonicStorageModule.forRoot() ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, InputItemPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}
## 実行結果
– | 参考文献・関連記事 |
---|---|
参考 | ■[Ionic3] Storageを使ったTODOアプリの作成 |
関連 | ■【Ionic入門】Android・iPhoneアプリ開発編 |
コメント