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 を直接編集しており
複雑になってくるので、今回は割愛します。

“iPad向けにjQueryUIのカレンダーDatepickerを設定” の続きを読む