ITコラム

jQuery UI datetimepicker

jQuery

2018.05.08

jQuery【 jQuery UI 】時刻まで選択可能な datetimepicker でカレンダーを表示

jQuery UI の datepicker を利用すると カレンダーから日付を入力することができますが、datetimepicker を利用すると 日付に加えて時刻まで選択することができます。
今回は、datetimepicker の 使用方法について紹介します。

datepicker のサンプル等については、以下のページをご参照下さい。
jQuery【 jQuery UI 】datepicker でカレンダーを表示するサンプル
jQuery【 jQuery UI 】datepicker のオプションと設定方法

目次

1.datetimepicker を読み込む
2.datetimepicker の使用方法

1.datetimepicker を読み込む

 
datetimepicker を利用するためには、DateTimePicker プラグインを 別途読み込む必要があります。
以下の方法で DateTimePicker プラグインを読み込みます。


datetimepicker をダウンロード

まず、公式ページからダウンロードします。

赤枠のアンカーをクリックして zip ファイルをダウンロードして下さい。

次に、ダウンロードした zip ファイルを展開して、「 datetimepicker-master 」フォルダの中の「 jquery.datetimepicker.js 」と「 jquery.datetimepicker.css 」を使用します。

jQuery の読み込みと共に、次のように「 jquery.datetimepicker.js 」及び「 jquery.datetimepicker.css 」を読み込みます。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="ファイルパス/jquery.datetimepicker.js"></script>

<link rel="stylesheet" href="ファイルパス/jquery.datetimepicker.css">

 
ファイルパス( ファイルの保存場所 )の記載にご注意下さい。
 
 

datetimepicker の CDN を利用

CDN を利用して、datetimepicker を直接読み込む方法もあります。

CDN( Contents Delivery Network, CDN )とは、Webコンテンツを インターネット経由で配信するためのネットワークを意味しています。
CDN を利用する場合は、必要なファイルを ダウンロードすることなく 直接読み込むことができます。

CDN を利用する場合は、jQuery と共に 次のように記述して読み込みます。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/build/jquery.datetimepicker.full.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/jquery.datetimepicker.css">

▲目次へ戻る

 

2.datetimepicker の使用方法

 
datetimepicker を使用して、カレンダーを表示します。
入力欄をクリックしてみて下さい。
また、表示されたカレンダーから任意の日時をクリックしてみて下さい。

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/build/jquery.datetimepicker.full.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/jquery.datetimepicker.css">

<script type="text/javascript">
<!--
$(function () {
  $("#wkDateTime").datetimepicker();
});
//-->
</script>

<div style="background-color:#CCC; padding : 20px;">
  <input type="text" id="wkDateTime">
</div>

上記は、CDNを利用して datetimepicker を直接読み込んでいますが、ダウンロードファイルを読み込む場合には、ファイルパスの記述にご注意下さい。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.