jQueryのdatetimepickerの使い方とは？datetimepickerを正しく使いこなそう！

システム
エンジニア

jQueryのdatetimepickerの使い方を教えてください。

プロジェクト
マネージャー

datetimepickerのjsとcssを使用し、ダウンロードしたりcdnを利用したりして使います。

jQueryのdatetimepickerの使い方とは？

今回は、jQueryのdatetimepickerの使い方について説明します。

jQueryのdatetimepickerを使えば、カレンダーUIで簡単に日時を指定できます。様々なオプションがあり、カスタマイズできます。また、日本語化対応も可能です。jQueryのdatetimepickerの使い方に興味のある方はぜひご覧ください。

基本的な使い方

jQueryのdatetimepickerの基本的な使い方を紹介します。datetimepickerのjsとcssを使用します。ダウンロードしても良いですし、cdnを利用しても良いです。ここではcdnでjQueryのdatetimepickerを使用可能にします。

以下サイトから最新のjsとcssのパスを取得してHTMLに記載します。
https://cdnjs.com/libraries/jquery-datetimepicker

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_datetimepicker1 by kskumd (@kskumd)
on CodePen.

日付と時刻が選択可能なdatetimepickerが簡単に実現できます。

時刻のみ表示

ここからは、jQueryのdatetimepickerのオプションを紹介します。まずは、時刻のみを表示するdatepickerオプションを紹介します。

HTMLは同じなので省略します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_datetimepicker2 by kskumd (@kskumd)
on CodePen.

時刻の選択のみが可能となっていることが分かります。

日付のみ表示

今度は、日付のみ表示する方法を紹介します。jQueryのdatetimepickerのtimepickerオプションを使用します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_datetimepicker3 by kskumd (@kskumd)
on CodePen.

日付の選択のみが可能となっていることが分かります。

選択可能な時刻

jQueryのdatetimepickerのallowTimesオプションを使用すれば、選択可能な時刻を設定できます。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_datetimepicker4 by kskumd (@kskumd)
on CodePen.

10分刻み

jQueryのdatetimepickerのstepオプションを使用すれば、刻み時刻を設定できます。ここでは、10分刻みに設定する方法を紹介します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_datetimepicker5 by kskumd (@kskumd)
on CodePen.

ここでは10分刻みにしましたが、「step:30」とすると30分刻みになります。

日本語化・フォーマットの指定

jQueryのdatetimepickerを日本語化する方法を紹介します。また、フォーマットを指定する方法もあわせて紹介します。オプションはカンマ区切りで複数設定できます。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_datetimepicker6 by kskumd (@kskumd)
on CodePen.

日本語になり、フォーマットが変更されていることが分かります。

システム
エンジニア

カレンダーUIで設定できる他に様々なオプションもあるんですね。

プロジェクト
マネージャー

「日付のみ」や「刻み時刻」など様々なオプションがありますので試してみてください。

まとめ

いかがでしたでしょうか。

jQueryのdatetimepickerを使えば、カレンダーUIで簡単に日時を指定できます。様々なオプションがあり、その使い方について紹介しました。ここで紹介した以外にもjQueryのdatetimepickerのオプションはあるので、興味のある方は調べてみてください。

ぜひご自身でソースコードを書いて、理解を深めてください。