typescriptの実装で質問です。
下の図のように、起算日と終了日にそれぞれカレンダーを用意し、カレンダーから日付を選択すると選択した日付を表示する機能を実装したいと考えています。
ところが、起算日のカレンダーから日付を選択すると、終了日にも選択した日付が表示されてしまいます。
起算日のカレンダーから選択した日付は起算日の場所に、終了日も同様に表示したいのですが方法がわかりません。どなたか教えていただけないでしょうか。
参考になるかわかりませんが、起算日のカレンダーから日付を選択すると、起算日、終了日のsubscribeが両方とも反応するために生じている事象と思われます。
fixedcost.ts
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { DatePicker } from 'ionic2-date-picker'; @Component({ selector: 'page-fixedcost', templateUrl: 'fixedcost.html', providers: [DatePicker] }) export class FixedCostPage { fixCostStartYmd: string; fixCostEndYmd: string; constructor(public navCtrl: NavController, public datePickerFixCostStart: DatePicker, public datePickerFixCostEnd: DatePicker) { // 起算日取得 this.datePickerFixCostStart.onDateSelected.subscribe( (date) => { this.fixCostStartYmd = this.convertDate(date); }); // 終了日取得 this.datePickerFixCostEnd.onDateSelected.subscribe( (date) => { this.fixCostEndYmd = this.convertDate(date); }); } // 起算日 showFixCostStartCalendar() { this.datePickerFixCostStart.showCalendar(); } // 終了日 showFixCostEndCalendar() { this.datePickerFixCostEnd.showCalendar(); } // 日付フォーマット(YYYY/MM/DD)変換 convertDate(date) { let tmpDate = date; let tmpYear = tmpDate.getFullYear(); let tmpMonth = tmpDate.getMonth() + 1; let tmpDay = tmpDate.getDate(); let strYear = tmpYear.toString(); let strMonth = tmpMonth.toString(); let strDay = tmpDay.toString(); if (tmpMonth < 10) { strMonth = '0' + tmpMonth.toString(); } if (tmpDay < 10) { strDay = '0' + tmpDay.toString(); } return strYear + '/' + strMonth + '/' + strDay; } }
fixCost.html
<script src="angular-locale_ja-jp.js"></script> <ion-content padding> (中略) <ion-row> <ion-col> <ion-label>起算日</ion-label> </ion-col> <ion-col> <ion-label>{{fixCostStartYmd}}</ion-label> </ion-col> <ion-col> <button ion-button icon-only (click)="showFixCostStartCalendar()"> <ion-icon name="calendar"></ion-icon> </button> </ion-col> </ion-row> <ion-row> <ion-col> <ion-label>終了日</ion-label> </ion-col> <ion-col> <ion-label>{{fixCostEndYmd}}</ion-label> </ion-col> <ion-col> <button ion-button icon-only (click)="showFixCostEndCalendar()"> <ion-icon name="calendar"></ion-icon> </button> </ion-col> </ion-row> </ion-content>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/10 00:47 編集