DateTimePicker
「DateTimePicker」は、HTMLフォームに日時の入力支援機能（ピッカー）を実装するプラグインです。似たようなライブラリーに、日付の入力にのみ対応したjQuery UIの「DatePicker」ウィジェットがありますが、DateTimePickerでは時間の入力にも対応しています。
DateTimePickerはGoogle Chromeなどのモダンブラウザーのほか、公式ドキュメントには表記がありませんがInternet Explorer 8〜もサポートしています。
step1 jQueryプラグインの読み込み
jQuery本体をjQueryの公式サイトから、DateTimePicker を配布ページからダウンロードしましょう。
プラグイン配布ページの画像
DateTimePicker はGitHub でも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。
プラグイン配布ページの画像
展開した「datetimepicker-master」フォルダに入っている「jquery.datetimepicker.js」と「jquery.datetimepicker.css」がDateTimePickerの構成ファイルです。
jQuery本体と 「jquery.mixitup.min.js」 を、利用するWebページの body の閉じタグ直前に読み込みます。
//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>
</body>
//(中略)
「jquery.datetimepicker.css」 をheadタグ内に記述します。
//(中略)
<link rel="stylesheet" href="jquery.datetimepicker.css">
</head>
//(中略)
これで準備はOKです。
step2 基本的な使い方
実際にプラグインの使い方を説明します。
jquery.datetimepicker.js を読み込んだ後、datetimepicker()メソッドを実行します。datetimepicker()メソッドは、ピッカーを使用したいフォーム要素をセレクターで記述し、.(ドット)繋ぎで指定します。
たとえば、「datetimepicker」というID名の要素にピッカーを表示したい場合は、$('#datetimepicker')のように書きます。
JavaScript
//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script>
$(function(){
$('#datetimepicker').datetimepicker();
});
</script>
//(中略)
HTMLでは、ピッカーを表示したいフォーム要素に、datetimepicker()メソッドで指定したID名を付けます。
HTML
//(中略)
<input id="datetimepicker" type="text">
//(中略)
これで基本的な機能が実装できました。以下の動画のようになれば成功です。
step3 オプションによるカスタマイズ
DateTimePickerにはとても多くのオプションがありますが、その中で特によく使うものに絞って紹介します。
オプションは以下のように指定します。
JavaScript
//(中略)
$(function(){
$('#datetimepicker').datetimepicker({
// ここにオプションを書いていく
});
});
//(中略)
timepickerオプション：時間ピッカーの表示／非表示
時間ピッカーの表示／非表示は、timepickerオプションで切り替えられます。「true」で表示、「false」で非表示になります。デフォルトは「true」です。
表示したい場合（デフォルト）
//(中略)
$(function(){
$('#datetimepicker').datetimepicker({
timepicker: true // デフォルト
});
});
//(中略)
表示したくない場合
//(中略)
$(function(){
$('#datetimepicker').datetimepicker({
timepicker: false
});
});
//(中略)
以下のようになります。
DateTimePicker時間ピッカーの表示／非表示
formatオプション：日付のフォーマットを指定
日付の表示フォーマットは、formatオプションで変更できます。デフォルトは、「Y/m/d」です。例では/（スラッシュ）ではなく.（ドット）つなぎで、日(d)月(m)年(Y)の順番に指定しています。
//(中略)
$(function(){
$('#datetimepicker').datetimepicker({
format: 'd.m.Y' // 日付のフォーマットを.（ドット）つなぎで表示し、並び順を変更
});
});
//(中略)
以下のようになります。
DateTimePicker日付のフォーマットを指定
複数のオプションを指定
複数のオプションを指定する場合は、,（カンマ）区切りで記述します。
//(中略)
$(function(){
$('#datetimepicker').datetimepicker({
timepicker: false, // 時間の入力支援を非表示に
format: 'd.m.Y' // 日付のフォーマットを.（ドット）つなぎで表示し、並び順を変更
});
});
//(中略)
時間ピッカーを非表示にしたオプションの改行の前に,（カンマ）で繋いでいます。
DateTimePicker複数のオプションをカンマ区切りで指定
DateTimePicker プラグインには、指定した日付から指定した日付までを表示したり、特定の日付以外を指定できないようにしたり、たくさんのオプションが用意されています。
DateTimePicker ダウンロードページの下部に詳細なドキュメントがまとまっていますので、確認しましょう。
日付や時間の入力フォームへの入力支援はユーザビリティの向上に繋がります。簡単に日付を絞り込めたり、特定の日付以外は選択できないようにしたりできるので、飲食店や美容室などの予約システムにも使えそうですね。
