ITコラム

jQuery

2018.05.08

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

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

最終更新日：2021年6月24日

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 を直接読み込んでいますが、ダウンロードファイルを読み込む場合には、ファイルパスの記述にご注意下さい。

なお時刻の選択が不要な場合は、datepicker を使用します。
datepicker のサンプル等については、以下のページをご参照下さい。