質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

RxJS

RxJSは、Observablesを用いたリアクティブプログラミングのJavaScript向けの実装です。イベント駆動処理も含めた非同期処理を高い可読性を持って容易にコーディングできます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

987閲覧

typescriptで一画面に複数のカレンダーを実装

irohamaru

総合スコア15

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

RxJS

RxJSは、Observablesを用いたリアクティブプログラミングのJavaScript向けの実装です。イベント駆動処理も含めた非同期処理を高い可読性を持って容易にコーディングできます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/11/06 13:48

編集2017/11/06 14:25

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

実行してみたところ、constructorにおいてdatePickerFixCostStart === datePickerFixCostEndでした。
これはAngularの機能によってComponentの記述providersに基づいて与えられているらしいということは分かりましたが、どのようにすれば複数の同じ種類の別のインスタンスを渡してもらえるかというのが見つかりませんでした。
おそらくこれはAngularの仕様なのではないかと思います。

別のオブジェクトがもらえないのであれば、以下のように呼び出し前に自分でどちらの入力を求めたのかを覚えておくというのが一つの方法としてあると思います。

typescript

1import { Component } from '@angular/core'; 2import { NavController } from 'ionic-angular'; 3import { DatePicker } from 'ionic2-date-picker'; 4 5enum DatePickerType { 6 StartDate, 7 EndDate 8} 9 10@Component({ 11 selector: 'page-fixedcost', 12 templateUrl: 'fixedcost.html', 13 providers: [DatePicker] 14}) 15export class FixedCostPage { 16 datePickerType: DatePickerType; 17 fixCostStartYmd: string; 18 fixCostEndYmd: string; 19 20 constructor( 21 public navCtrl: NavController, 22 public datePicker: DatePicker, 23 ) { 24 // 日付取得 25 this.datePicker.onDateSelected.subscribe( 26 (date) => { 27 switch(this.datePickerType) { 28 case DatePickerType.StartDate: 29 this.fixCostStartYmd = this.convertDate(date); 30 break; 31 case DatePickerType.EndDate: 32 this.fixCostEndYmd = this.convertDate(date); 33 break; 34 } 35 } 36 ); 37 } 38 39 // 起算日 40 showFixCostStartCalendar() { 41 this.datePickerType = DatePickerType.StartDate; 42 this.datePicker.showCalendar(); 43 } 44 45 // 終了日 46 showFixCostEndCalendar() { 47 this.datePickerType = DatePickerType.EndDate; 48 this.datePicker.showCalendar(); 49 } 50 51 // 日付フォーマット(YYYY/MM/DD)変換 52 convertDate(date) { 53 let tmpDate = date; 54 let tmpYear = tmpDate.getFullYear(); 55 let tmpMonth = tmpDate.getMonth() + 1; 56 let tmpDay = tmpDate.getDate(); 57 let strYear = tmpYear.toString(); 58 let strMonth = tmpMonth.toString(); 59 let strDay = tmpDay.toString(); 60 61 if (tmpMonth < 10) { 62 strMonth = '0' + tmpMonth.toString(); 63 } 64 if (tmpDay < 10) { 65 strDay = '0' + tmpDay.toString(); 66 } 67 return strYear + '/' + strMonth + '/' + strDay; 68 } 69}

私はこれがそんなにロクでもない方法だとは思いませんが、どうなのでしょう。

投稿2017/11/08 02:53

miimou

総合スコア74

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

irohamaru

2017/11/10 00:47 編集

>miimouさん 丁寧な回答ありがとうございます。 入力元を覚えておきswitchで分岐させるという発想はなかったので、大変参考になりました。 ちなみに、ionic2-date-pickerの中を解読してみたところ、 new DatePicker(ModelController, ViewController)でdate-pickerのインスタンスが生成できるようです。 以下のようなソースで複数のカレンダーを別オブジェクトとして認識できるようになりました。 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 modalCtrl: ModalController, public viewCtrl: ViewController, public datePickerVariableCost: DatePicker, public datePickerFixCostStart: DatePicker, public datePickerFixCostEnd: DatePicker ) { // 起算日 this.datePickerFixCostStart = new DatePicker(<any>this.modalCtrl, <any>this.viewCtrl); this.datePickerFixCostStart.onDateSelected.subscribe( (date) => { this.fixCostStartYmd = this.convertDate(date); }); // 終了日 this.datePickerFixCostEnd = new DatePicker(<any>this.modalCtrl, <any>this.viewCtrl); this.datePickerFixCostEnd.onDateSelected.subscribe( (date) => { this.fixCostEndYmd = this.convertDate(date); }); } (以下省略)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問