【jQuery】日付と時間を直感的に選択できる[DateTimePicker]が便利です。(1)TagsONZE株式会社オンズ企業サイトへMenu株式会社オンズ開発ブログ【jQuery】日付と時間を直感的に選択できる[DateTimePicker]が便利です。【jQuery】日付と時間を直感的に選択できる[DateTimePicker]が便利です。Googleユーザーに日付や時間を指定してもらう際に、直感的な操作で簡単に日時を指定できる[DateTimePicker]を紹介します。サンプルをご覧ください。[DateTimePicker]:サンプルお試しいただいたように、大変優れたユーザーインターフェースで、ストレス無く軽快に動作します。jQueryに依存しており、導入も比較的簡単にできるのも魅力ですね。「DatePicker」の機能がありますが、そちらは「TimePicker」の機能が無いので、時間の指定もしたい場合は今回の[DateTimePicker]を使うことをお勧めします。公式サイトより、スクリプトのファイル一式をダウンロードしてきましょう。DateTimePicker:配布サイトzipファイルをダウンロードして解凍すると、いくつかのフォルダとファイルに展開されますが、実際に使うのはスクリプト本体の「jquery.datetimepicker.js」と、デザインを司るスタイルシートの「jquery.datetimepicker.css」になります。このとき、先にjQuery本体ファイルを読み込んでおくことも忘れないように。href="jquery.datetimepicker.css">続いてHTMLの記述ですが、フォームのインプット要素を用意して、任意のIDまたはCLASS名を付与します。ここでは仮にid=“sample”とします。スクリプトの設定で先ほどのインプット要素に対して[DateTimePicker]を効かせます。$(“#sample”).datetimepicker();これで導入完了!すでに専用のスタイルシートを読み込んでいるので、カレンダーなども綺麗に表示されます。好みのデザインに変更したいときは「jquery.datetimepicker.css」を上書きするカタチでスタイルを設定すればOKです。お問い合わせフォームなどへの挿入で真価を発揮するこのプラグイン。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。【jQuery】レスポンシヴ対応のスライダー[flickity]は今後の定番になるでしょう。