HTML5対応ブラウザ、未対応ブラウザの両方で確実にカレンダー表示する方法

Modernizr

日付を入力して欲しいフォームにはカレンダーを表示させたいと思うのが世の常です。

HTML5では
[html]<input type="date" />[/html]
とするだけで簡単にカレンダー表示できます。
(ブラウザによってデザインが違いますが)

こんなふうにHTML5対応のブラウザで見るとクリックでカレンダーが表示されるはずです(未対応の場合は無反応です)→

でも、まだまだHTML5未対応ブラウザは多い。(HTML5ついでにCSS3対応表はこちら
それで、jQueryUIのdatepickerを選択する。
万事解決かと思いきや、スマホ表示で表示したときにカレンダーとソフトキーボードが同時に立ち上がり、邪魔で入力しづらい!という経験はありませんか?

そんな時は、HTML5とjQueryUIの合わせ技をするしかありません。
introductionがとても長いですが、今回はその方法です。

やりたいこと

  • HTML5対応のブラウザではHTML5仕様の日付入力フォームを表示する
    (スマホはHTML5に対応しているので、こうすることでソフトキーボードに自動的に日付が表示される)
  • HTML5未対応ブラウザではjQueryのカレンダーを表示する

1.HTML5でフォームを作成する

[html]<input id="date-samp" name="date" type="date" />[/html]
もうこれだけでHTML5対応ブラウザは完了です。

2.jQueryとjQueryUIを読み込む

(ここでは1.10.2を指定しています。)
[html]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"<script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"><script>[/html]

3.カレンダーを日本語で表示させる場合は

[html]<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.js" type="text/javascript"<script>[/html]

4.jQueryUI用のスタイルシートを読み込む

デザインはいろいろあります。こちら(http://jqueryui.com/themeroller/)からダウンロードすることもできます。

5.HTML5対応ブラウザかどうか判定するために

modernizr.jsを使います。

Modernizr

modernizr.comのDevelopmentをクリックして、必要な機能にチェックします。
今回は、HTML5のdateが使えるかどうかを判定したいので、HTML5欄のInput Typesにチェックを入れてGENERATE!ボタンをクリック、DOWNLOADボタンをクリック!
ダウンロードされたファイルをディレクトリの下に格納して、読み込みます。
[html]<script src="/javascripts/modernizr.js" type="text/javascript"<script>[/html]

6.判定!

[code lang=”js”]if (!Modernizr.inputtypes.date) { //HTML5のinput要素に対応しているか判定
jQuery(‘#date-samp’).datepicker({ //していなかったらjQueryのdatepickerを該当するidのフォーム要素に適用
beforeShow: function(input, inst) {
var calendar = inst.dpDiv;

setTimeout(function() {
calendar.position({ //オプションでカレンダー位置を指定したりして
my: ‘left bottom’,
at: ‘left top’,
of: input
});
}, 1);
}
});
}[/code]

7.完了!

modernizr.jsでの判定はとてもよく使います。
便利です。

ちなみに、WordPressのcontactform7にdatepickerを使いたい場合、
contactform7-datepickerプラグインを入れるかもしれませんが、このプラグインはHTML5で出力しないので、スマホで入力しようとするとソフトキーボードがtextタイプになっていて入力しづらいです。
でも、上記の方法はcontactform7でも使えます。