[jQuery UI] Datepicker の使い方とオプション
input タグを置くだけで簡単に日付入力カレンダーが作れる jQuery UI の Datepicker の設置方法と、オプションのサンプル。オプションはたくさん用意されているので一部。 jQuery UI にはいくつかテーマが用意されていて、ダーク系とかブルー系とか、テーマ CSS を読み込むだけで見た目の色を変えることができる。
Datepicker の設置方法
jQuery と jQuery UI を読み込む
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/vader/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>/jquery-ui.min.css の前に書いてある vader が jQuery UI のテーマの名前で、ここを変えると見た目の色が変わる。
テーマは ThemeRoller から選択可能。自分で色をカスタマイズすることもできる。「 Gallaery 」タブから好みの既存テーマを選んで、テーマ名を小文字にして CSS のリンクに書く。テーマ名が「 UI darkness 」だったら ui-darkness と記述する。
HTML
<input type="text" id="datepicker">jQuery
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>オプションのサンプル
サンプルデモSee the Pen Datepicker jQuery UI by AgoPeanuts (@AgoPeanuts) on CodePen.
「カレンダー1」が、Datepicker の設置方法 と同じオプションなしの基本形。
「カレンダー2」
| dateFormat | 日付フォーマット（形式）の設定。「 DD 」は曜日を表す。「yy年mm月dd日」とかも設定可能。 |
|---|---|
| showAnim | カレンダー開閉時のアニメーションの設定。 設定値は、 show , slideDown , fadeIn blind , bounce , clip , drop , fold , slide |
| changeYear | 年選択プルダウンの表示・非表示。 設定値は、 false : 非表示 , true : 表示 |
| changeMonth | 月選択プルダウンの表示・非表示。設定値は、年選択プルダウンと同じ。 |
「カレンダー3」
| showOn | カレンダー開くときのボタン設定。focus : テキストボックスクリックでのみ開く（初期値）button : アイコン（またはボタン）クリックでのみ開くboth : 上のどっちでも開く |
|---|---|
| buttonText | (開く)ボタンに表示されるテキスト |
| buttonImageOnly | 画像のみ表示にするか、ボタン上に画像を表示させるかの設定。true : 画像のみ表示false : 画像をボタン上に表示（初期値） |
| buttonImage | カレンダーアイコンに使う画像の URL を設定。 |
| showButtonPanel | カレンダーに「 Today 」,「 Done 」ボタンを設定。 *注1 |
*注1 : カレンダーに表示される「 Today 」ボタンは、多くの人が想像するものとは違う。
「 Today 」ボタンを押すと、今日の日付が選択される（テキストボックスに日付が入力される）機能のように想像されるが、本来の動きとしては「 Today 」ボタンを押すと、カレンダー上の今日の日付に移動し、ハイライトされるだけ。これは仕様であって、バグではないらしい。
実際、今月以外の月から、「 Today 」ボタンを押すと今月に飛ぶ。
「カレンダー4」
See the Pen Datepicker Today Button by AgoPeanuts (@AgoPeanuts) on CodePen.
| yearRange | 年プルダウンに表示する年の範囲を設定。（デフォルト ： 現在から前後 10 年）"-XX:+YY" : 現在日付の年から XX 年前 ～ YY 年後までの範囲（誕生日なら '-100:+0’ とか）"XXXX:YYYY" : XXXX年からYYYY年の範囲"C-XX:C+YY" : 現在日付、または選択された日付の年から XX 年前 ～ YY 年後の範囲 |
|---|
「 Today 」ボタンを押して、テキストボックスに今日の日付を入力させるには、以下のコードを追加する。
$.datepicker._gotoToday = function(id) {
$(id).datepicker('setDate', new Date()).datepicker('hide').blur().change();
};