Command disabled: backlink

Pickerコントロール

値や日付を選択する良く使うPickerコントロールですが、環境依存が激しいために注意して作らなければならないようです。 本家のサンプルなども環境固有の機能を使ったものが多く、クロスプラットフォームのサンプルが少ないです。

よく使うものだけにその都度分岐させるのでは具合が悪いので、単一コードもしくはラッパーを作って対応していきたいと思います。

Pickerの種類

  • 単一カラム選択
  • 複数カラム選択
  • 日時選択

AndroidとiOS

  • Androidのみ有効なパラメータuseSpinnerをfalseにしたままだとiOSが落ちる ディフォルトfalseのため明示的にtrueにしておく

日付選択

日付を選択する

valueプロパティにDateクラスのインスタンスを割り当てることでピッカーの選択日付を設定することができます。 (valueプロパティは日付ピッカー専用です)

特別な理由がない限りはvalueはオブジェクト生成時にセットした方がいいと思われます。 Androidでは後からvalueにセットすると値が反映されない不審な不語気を確認しています。(iOSはOK)

var selectDate = new Date(2011,1,1);
var picker = Ti.UI.createPicker({
      type:Ti.UI.PICKER_TYPE_DATE,
      minDate:new Date(2000,1,1),
      maxDate:new Date(2099,12,31),
      value: selectDate
    });

選択されている日付を取得する

ピッカーの選択日付をセットするにはvalueプロパティを使いますが、 逆に選択されている日付を取得する時にvalueプロパティの値をとっても常にセットした時と同じ値が帰ってしまいます。

日付タイプのピッカーでは選択行というものが意味をなさないので、手段はchangeイベントから取得する一つしかありません。

var selectedDate = new Date();
picker.addEventListener('change',function(e){
   //e.valueはDate型です
   selectedDate = e.value;
});
titanium/ui_controls/picker.txt · 最終更新: 2012/07/31 23:16 (外部編集)
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0