Posted at

Sencha TouchでDateTimeピッカーを使う

More than 3 years have passed since last update.

Sencha TouchにはDatePickerはあるけどDatetimePickerがない。

▼ DatePicker

Ext_field_DatePicker_Example___Sencha_Try 2.png

Sencha marketにDateTimePickerがあるけどメンテナンスされておらず、DateTimePickerフィールド内でキャンセルボタンを押すとリロードするまで日時を選べないバグが残っている。

参照:Sencha Touch: Problems with Date Time Picker


datetimepickerv2を組み込む

このバグを解消したものがGitHubにあるsenchatouch-datetimepickerv2を使う。

GitHubからダウンロードして解凍したzipの中身のsenchatouch-datetimepickerv2-master/uxフォルダの中のDateTime.jsDateTimePicker.jsを下記フォルダに入れる。

Sencha Architectで作ったプロジェクト構成の例)



  1. DateTime.jsをプロジェクトフォルダ内のtouch/src/ux/pickerフォルダ(pickerフォルダがなければ作る)の中に、

2.DateTimePicker.jsをプロジェクトフォルダ内のtouch/src/ux/fieldフォルダ(fieldフォルダがなければ作る)の中に、

それぞれコピーする。


viewでdatetimepicerv2を読み込む

表示したviewの中でrequiresの中で Ext.ux.field.DateTimePicker を読み込ませたら、他のフォームアイテムと同じようにitemsオプションで定義して表示できる。

{

xtype: `datetimepickerfield`,
name: 'recorded',
label: 'Record Date&Time`,
value: new Date(),
},

▼ DateTimePickerフィールド

Datetimepicker_Sencha_Component__Forms_—_Sencha_Market.png

まだ日本語にローカライズする方法までは調べてないけど英語表記で構わなければこれで日時選択のpickerが表示されるようになる。