このページの本文へ

DESIGN こうめの“これから使える”jQueryプラグイン ― 第9回

日付や時間を直感的に選択できるDateTimePicker

2014年04月11日 11時00分更新

大竹孔明/まぼろし

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

DateTimePicker


 「DateTimePicker」は、HTMLフォームに日時の入力支援機能(ピッカー)を実装するプラグインです。似たようなライブラリーに、日付の入力にのみ対応したjQuery UIの「DatePicker」ウィジェットがありますが、DateTimePickerでは時間の入力にも対応しています。

 DateTimePickerはGoogle Chromeなどのモダンブラウザーのほか、公式ドキュメントには表記がありませんがInternet Explorer 8〜もサポートしています。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、DateTimePicker を配布ページからダウンロードしましょう。

プラグイン配布ページの画像
プラグイン配布ページの画像

 DateTimePicker はGitHub でも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。

プラグイン配布ページの画像
プラグイン配布ページの画像

 展開した「datetimepicker-master」フォルダに入っている「jquery.datetimepicker.js」と「jquery.datetimepicker.css」がDateTimePickerの構成ファイルです。

 jQuery本体と 「jquery.mixitup.min.js」 を、利用するWebページの body の閉じタグ直前に読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>
</body>
//(中略) 

 「jquery.datetimepicker.css」 をheadタグ内に記述します。


//(中略)
<link rel="stylesheet" href="jquery.datetimepicker.css">
</head>
//(中略)

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 jquery.datetimepicker.js を読み込んだ後、datetimepicker()メソッドを実行します。datetimepicker()メソッドは、ピッカーを使用したいフォーム要素をセレクターで記述し、.(ドット)繋ぎで指定します。

 たとえば、「datetimepicker」というID名の要素にピッカーを表示したい場合は、$('#datetimepicker')のように書きます。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script>
$(function(){
$('#datetimepicker').datetimepicker();
});
</script>
//(中略)

 HTMLでは、ピッカーを表示したいフォーム要素に、datetimepicker()メソッドで指定したID名を付けます。

HTML


//(中略)
<input id="datetimepicker" type="text">
//(中略)

 これで基本的な機能が実装できました。以下の動画のようになれば成功です。

step3 オプションによるカスタマイズ

 DateTimePickerにはとても多くのオプションがありますが、その中で特によく使うものに絞って紹介します。

 オプションは以下のように指定します。

JavaScript


//(中略)
$(function(){
    $('#datetimepicker').datetimepicker({
        // ここにオプションを書いていく
    });
});
//(中略)

timepickerオプション:時間ピッカーの表示/非表示

  時間ピッカーの表示/非表示は、timepickerオプションで切り替えられます。「true」で表示、「false」で非表示になります。デフォルトは「true」です。

表示したい場合(デフォルト)


//(中略)
$(function(){
    $('#datetimepicker').datetimepicker({
        timepicker: true // デフォルト
    });
});
//(中略)

表示したくない場合


//(中略)
$(function(){
    $('#datetimepicker').datetimepicker({
        timepicker: false
    });
});
//(中略) 

 以下のようになります。

プラグイン配布ページの画像
DateTimePicker時間ピッカーの表示/非表示

formatオプション:日付のフォーマットを指定

 日付の表示フォーマットは、formatオプションで変更できます。デフォルトは、「Y/m/d」です。例では/(スラッシュ)ではなく.(ドット)つなぎで、日(d)月(m)年(Y)の順番に指定しています。


//(中略)
$(function(){
    $('#datetimepicker').datetimepicker({
        format: 'd.m.Y' // 日付のフォーマットを.(ドット)つなぎで表示し、並び順を変更
    });
});
//(中略)

 以下のようになります。

プラグイン配布ページの画像
DateTimePicker日付のフォーマットを指定

複数のオプションを指定

 複数のオプションを指定する場合は、,(カンマ)区切りで記述します。


//(中略)
$(function(){
    $('#datetimepicker').datetimepicker({
        timepicker: false, // 時間の入力支援を非表示に
        format: 'd.m.Y' // 日付のフォーマットを.(ドット)つなぎで表示し、並び順を変更
    });
});
//(中略)

 時間ピッカーを非表示にしたオプションの改行の前に,(カンマ)で繋いでいます。

プラグイン配布ページの画像
DateTimePicker複数のオプションをカンマ区切りで指定

  DateTimePicker プラグインには、指定した日付から指定した日付までを表示したり、特定の日付以外を指定できないようにしたり、たくさんのオプションが用意されています。

 DateTimePicker ダウンロードページの下部に詳細なドキュメントがまとまっていますので、確認しましょう。


 日付や時間の入力フォームへの入力支援はユーザビリティの向上に繋がります。簡単に日付を絞り込めたり、特定の日付以外は選択できないようにしたりできるので、飲食店や美容室などの予約システムにも使えそうですね。


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング