[jQuery UI] Datepicker の使い方とオプション

2019-07-24JavaScriptjQuery

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」は「 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();
};

Posted by Agopeanuts