ユーザーに日付や時間を指定してもらう際に、直感的な操作で簡単に日時を指定できる［DateTimePicker］を紹介します。

まずはサンプルをご覧ください。

［DateTimePicker］：サンプル

お試しいただいたように、大変優れたユーザーインターフェースで、ストレス無く軽快に動作します。
jQueryに依存しており、導入も比較的簡単にできるのも魅力ですね。
実は jQueryUI にも「DatePicker」の機能がありますが、そちらは「TimePicker」の機能が無いので、時間の指定もしたい場合は今回の［DateTimePicker］を使うことをお勧めします。

まずは公式サイトより、スクリプトのファイル一式をダウンロードしてきましょう。

DateTimePicker：配布サイト

zipファイルをダウンロードして解凍すると、いくつかのフォルダとファイルに展開されますが、実際に使うのはスクリプト本体の「jquery.datetimepicker.js」と、デザインを司るスタイルシートの「jquery.datetimepicker.css」になります。
この２つのファイルをHTMLの <head>〜</head> 内で読み込みます。
このとき、先にjQuery本体ファイルを読み込んでおくことも忘れないように。

<script src="query.js"<</script>
<script src="jquery.datetimepicker.js"></script>
<link rel="stylesheet" href="jquery.datetimepicker.css">

続いてHTMLの記述ですが、フォームのインプット要素を用意して、任意のIDまたはCLASS名を付与します。
ここでは仮にid=“sample”とします。

そしてスクリプトの設定で先ほどのインプット要素に対して［DateTimePicker］を効かせます。

$(“#sample”).datetimepicker();

これで導入完了！
すでに専用のスタイルシートを読み込んでいるので、カレンダーなども綺麗に表示されます。

好みのデザインに変更したいときは「jquery.datetimepicker.css」を上書きするカタチでスタイルを設定すればOKです。

お問い合わせフォームなどへの挿入で真価を発揮するこのプラグイン。ぜひお試しください。

［DateTimePicker］：サンプル