Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Sencha TouchでDateTimeピッカーを使う

More than 5 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が表示されるようになる。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away