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

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

ただいまの
回答率

90.49%

  • HTML

    9000questions

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

  • TypeScript

    346questions

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

  • Angular2

    174questions

  • Ionic

    74questions

    Ionicは、AngularJSベースのモバイルアプリ向けUIフレームワークです。Apache Cordovaを拡張して作られているため、モバイルアプリ作成に適しています。シンプルなUIも特徴です。

  • RxJS

    12questions

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 588

irohamaru

score 5

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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DatePicker } from 'ionic2-date-picker';

enum DatePickerType {
  StartDate,
  EndDate
}

@Component({
  selector: 'page-fixedcost',
  templateUrl: 'fixedcost.html',
  providers: [DatePicker]
})
export class FixedCostPage {
  datePickerType: DatePickerType;
  fixCostStartYmd: string;
  fixCostEndYmd: string;

  constructor(
    public navCtrl: NavController,
    public datePicker: DatePicker,
  ) {
    // 日付取得
    this.datePicker.onDateSelected.subscribe(
      (date) => {
        switch(this.datePickerType) {
          case DatePickerType.StartDate:
            this.fixCostStartYmd = this.convertDate(date);
            break;
          case DatePickerType.EndDate:
            this.fixCostEndYmd = this.convertDate(date);
            break;
        }
      }
    );
  }

  // 起算日
  showFixCostStartCalendar() {
    this.datePickerType = DatePickerType.StartDate;
    this.datePicker.showCalendar();
  }

  // 終了日
  showFixCostEndCalendar() {
    this.datePickerType = DatePickerType.EndDate;
    this.datePicker.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;
  }
}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/10 09:46 編集

    >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);
    });
    }

    (以下省略)

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    cordovaでキーボードを出したままに

    cordova + ionicにて開発しています。 テキスト入力(textarea)とボタンを配置し、ボタンを押下するたびにテキスト入力の文字列をリストへ追加していくイメージの

  • 受付中

    Ionic2 Button設定について

    Ionic2でアコーディオンを実装して、その中にボタンを設置したのですが、案の定ボタンを押す前にアコーディオンが反応してしまい、ボタンをことが出来ません。 toFront(最前面

  • 解決済

    angularjs ionic 複数スクロールバーの制御

    $ionicScrollDelegateを使用してスクロールの機能実装を行っているのですが、 1つのページに複数のスクロールする箇所がある場合に、そのうち1つにだけ制御を行うには

  • 解決済

    【TypeScript】連想配列の要素の取得方法

    以下のソース中の配列:fixCostListの要素取得の方法について質問です。 fixCostList[0]で0番目の要素を取得しようと思っているのですが、undefinedと

  • 解決済

    ionic2とionic3について

    どちらかをこれ彼勉強する場合、やっぱりionic3の方がよいですか? ionic1からionic2への移行はけっこう大変なイメージですが、2から3への移行もインパクトありますか?

  • 解決済

    【AngularJS】date型の変換

     開発環境 開発環境:Cordova(7.1.0) + Ionic(3.19.0) 対象:iPadアプリ  実現したいこと 2018-01-22T08:29:07.09

  • 受付中

    datepickerのform送信

    jqueryのdatepickerについて使い方をご存知でしたらお教えください。 datepickerにはinputの表示値に下記のオプションで、指定の表示にできることをしりました

  • 受付中

    Ionic3にてタッチイベントを検出する

    Ionic3を使って、アプリを開発していますが、 タッチイベントがどうしても取得できません。 画面をタップした時に処理を実行したいです。 経験のある方、ヒントだけでもアドバ

同じタグがついた質問を見る

  • HTML

    9000questions

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

  • TypeScript

    346questions

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

  • Angular2

    174questions

  • Ionic

    74questions

    Ionicは、AngularJSベースのモバイルアプリ向けUIフレームワークです。Apache Cordovaを拡張して作られているため、モバイルアプリ作成に適しています。シンプルなUIも特徴です。

  • RxJS

    12questions