jQuery UI Datepickerで3つのよく使う機能

jQuery UI Datepickerは便利ですよね。日付関連の入力で重宝しています。
今回は仕事でよく使っているjQuery UI Datepickerの機能を3つ紹介いたします。

まずはベースのDatepickerを作る

まずはベースとなるHTMLとスクリプトを組みます。
jQuery本体とjQuery UI、Datepickerの日本語化ファイルを読み込みます。

<!-- jQuery本体-->
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Datepicker日本語化 -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<!-- jQuery UI のCSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

続いてDatepickerを表示させるinputタグを入力します。

<input type="text" name="date" value="">

最後にDatepickerのスクリプトを記述します。

$("[name=date]").datepicker({
    // YYYY-MM-DD形式で入力されるように設定
    dateFormat: 'yy-mm-dd'
});

[btn class=”rich_pink”]デモ確認[/btn]

3つのよく使う機能

複数月を一気に表示

Datepickerで表示されるカレンダーは通常1つですが、複数表示させることも可能です。
パラメーターにnumberOfMonthsを追加して、表示したいカレンダー数を設定してください。

$("[name=date]").datepicker({
    dateFormat: 'yy-mm-dd',
    // カレンダーを3つ表示
    numberOfMonths: 3,
});

[btn class=”rich_pink”]デモ確認[/btn]

最小日や最大日などの選択可能範囲の指定

yyyy年mm月dd日～yyyy年mm月dd日までの範囲の日付のみを選択可能にすることもできます。
minDateパラメータで最小日付を、maxDateで最大日付を設定します。
サンプルでは2017年08月15日～2017年10月15日の範囲の日付を選択可能にします。

$("[name=date]").datepicker({
    dateFormat: 'yy-mm-dd',
    // 2017-08-15以降を選択可能
    minDate: new Date(2017, 8 - 1, 15),
    // 2017-10-15まで選択可能
    maxDate: new Date(2017, 10 - 1, 15),
});

[btn class=”rich_pink”]デモ確認[/btn]

現在の日付から○○日前～△△日後まで選択可能という設定もできます。

$("[name=date]").datepicker({
    dateFormat: 'yy-mm-dd',
    // 現在日時から7日前から選択可能
    minDate: "-7d",
    // 現在日時から10日後まで選択可能
    maxDate: "+10d",
});

2つの入力ボックスで範囲指定

2つのテキストボックスを用意して、yyyy年mm月dd日～yyyy年mm月dd日という範囲指定も可能です。

まずテキストボックスを2つ作ります。

<input type="text" name="start">～
<input type="text" name="end">

続いてそれぞれのテキストボックスにDatepickerのスクリプトを設定します。

var format = 'yy-mm-dd';


// 開始日の設定
var start = $("[name=start]").datepicker({
    dateFormat: 'yy-mm-dd'
}).on("change", function () {
    // 開始日が選択されたとき
    // 終了日の選択可能最小日を設定
    end.datepicker("option", "minDate", getDate(this));
});

// 終了日の設定
var end = $("[name=end]").datepicker({
    dateFormat: 'yy-mm-dd'
}).on("change", function () {
    // 開始日が選択されたとき
    // 開始日の選択可能最大日を設定
    start.datepicker("option", "maxDate", getDate(this));
});


/**
 * 選択された日付をminDate,maxDate用に変換
 */
function getDate(element) {
    var date;
    try {
        date = $.datepicker.parseDate(format, element.value);
    } catch (error) {
        date = null;
    }
    return date;
}

[btn class=”rich_pink”]デモ確認[/btn]