iPad向けにjQueryUIのカレンダーDatepickerを設定

iPadで、jQueryUIのDatepickerを使ったカレンダー選択式の
日付選択フォームを実装したときのポイントをまとめてみました。

ipad-jqueryui-datepicker

Datepickerをそのまま適用すると、パソコン向け仕様のままなのでこうなります。

  • 日付が小さくて押しにくい
  • カレンダーが開くとキーボードも開いて画面が狭くなる
  • 入力欄が端のほうにあるとカレンダーが画面外に見切れる

これらをタッチデバイス向けに改良しつつ
クライアントワークなので、オリジナルデザインで実装しました。

  1. jQueryUIをダウンロード
  2. カレンダー表示を日本語化
  3. CSSの適用
  4. フォーカスした時iPadのキーボードが開かないようinputにreadonlyを設定
  5. 初期値で今日の日付を設定
  6. 入力キャンセルのための「閉じる」ボタンと、月を移動した状態から今月へ戻る「今日」ボタン追加

サンプルソース

案件で実装した際はこの他に
inputを選んだ時はで日付のキーボード直接入力とし
input横のカレンダーボタンを選んだ場合だけカレンダー入力できるようにする改造もあったのですが
この対応ではライブラリの jquery-ui-1.10.4.custom.js を直接編集しており
複雑になってくるので、今回は割愛します。

jQueryUIをダウンロード

まずは、jQueryUIの公式ページヘ行ってソースを取得します。
今回は、カレンダー表示のDatepickerしか使わないので
ほしい機能だけ選べる「Custom Download」を選びます。

ipad-jqueryui-datepicker-webpage

Custom Downloadでは、次のように設定してからデータをダウンロードしました。

  • 今回はiPad対応なので、古い環境(Legacy)は切り捨てます。Versionは安定版のStableを選択。
  • デフォルトでは全てのチェックが入っているので、Componentsで全部のチェックを外します。
  • カレンダー表示のDatepickerを選択すると、必須のCoreも一緒にチェックしてくれます。
  • 指定のデザインに合わせて仕上げる必要があったので、Themeはテーマなし(NoTheme)を選択。
  • CSS Scopeにclass名を指定すると、jQueryUIをページ全体ではなく特定class配下のみで有効にできます。

ipad-jqueryui-datepicker-download

カレンダー表示を日本語化

このままjQueryUIを適用すると、
曜日は Sun,Mon…
月は January,February…
の英語表記になります。

ダウンロードしたデータの中に日本語化するためのjavascriptが入っているので
まずはそれを適用させます。

/development-bundle/ui/i18n/jquery.ui.datepicker-ja.js

このjsをHTMLから外部jsとして追加で読み込むと、カレンダーを日本語化できます。

<script type="text/javascript" src="【ファイルまでのパス】jquery.ui.datepicker-ja.js"></script>

日本語化のためのjquery.ui.datepicker-ja.jsは、24行程度の短いコードなので
ファイルの内容をまるごとコピーしてjquery-ui-1.10.4.custom.jsの末尾にペーストするのもありかと思います。

CSSの適用

今回は、テーマなしのまっさらなセットをダウンロードしたので
最初はこのように、スタイルが全くきいていない表示になっています。

スタイルを設定していないDatepicker

ここへ、スタイルを作って適用していきます。

具体的な設定内容は
サンプルソースで。

タップしやすいサイズに設定

初期状態ではカレンダーが小さすぎて日付をタップしにくいので
同時に、日付やボタンをタブレットでも押しやすいサイズにします。

画面外へ見切れないようカレンダー表示位置を画面中央へ変更

jQuery UIでは、カレンダーがinputのわきにでてくるよう
elementへ直接topとleftの値を設定しているので
topとleftの値は!importantで上書きします。

フォーカスした時iPadのキーボードが開かないようinputにreadonlyを設定

datepickerは、設定したinputがフォーカスされたときカレンダーが表示されるのですが
iPadはinputへフォーカスが当たると、キーボードが画面の下から出てくるので
せっかく表示されたカレンダーが隠れてしまいます。

ipad-jqueryui-datepicker-keybord

このようにinputへreadonlyを指定すると、フォーカスしたときにキーボードを表示しなくなります。

<input id="datepicker" value="" type="text" readonly="readonly" />

初期値で今日の日付を設定

Datepickerのオプション、setDateをtodayに指定すると
初期値として今日の日付を選べますが
このように書いても全然適用してもらえずハマりました…

$('#datepicker').datepicker('setDate', 'today');

どうやら、setDateは値を渡す類のオプションではなく
定義済みのDatepickerに後付で設定するメソッドなので
先にdatepicker()を定義してから送らないと実行されないよう。

こうして、重ねがけするか

$('#datepicker').datepicker().datepicker('setDate', 'today');

こうして、2回定義すると今日の日付が初期値に設定できました。

$('#datepicker').datepicker();
$('#datepicker').datepicker('setDate', 'today');

参考:
jQuery Datepickerのデフォルト日付 | ENTEREAL/エンタリアル

入力キャンセルのための「閉じる」ボタンと、月を移動した状態から今月へ戻る「今日」ボタン追加

デバッグのため何度もさわっていると気付いたのがこちら。

  • iPadでDatepickerのカレンダーを開くと日付を選択しないと閉じられない
  • 月の切替は1月ずつめくりながら

ボタンパネルのオプションを指定すると、これらを補う機能を追加できます。

$('#datepicker').datepicker({'showButtonPanel': true})

関連記事

Pocket