.net column
.NET開発者のためのブログメディア

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

 
jQueryのdatetimepickerの使い方とは?datetimepickerを正しく使いこなそう!
基本情報技術者試験の試験対策はこちら>>
SE
jQueryのdatetimepickerの使い方を教えてください。
PM
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.


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

SE
カレンダーUIで設定できる他に様々なオプションもあるんですね。
PM
「日付のみ」や「刻み時刻」など様々なオプションがありますので試してみてください。

まとめ

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

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags