jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際は大体jQueryプラグインのDateTimePickerというものを利用していた。ただ、今回は機能的な問題でjQuery UIのDatepickerを利用することになったので使い方をメモ。

リファレンス

https://js.studio-kingdom.com/jqueryui/widgets/datepicker

CDN呼び出し

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

各種ソース&サンプル

オプション無しの基本的な呼び出し方

ソースコード

$("#date").datepicker({});

サンプル

https://taitan916.info/sample/jquery-ui-datepicker/

年月日のフォーマットを指定の上で、本日～30日後まで選択可能

ソースコード

$("#date").datepicker({
    minDate: 0, //最小は本日まで
    maxDate: 30, //最大は30日後まで
    dateFormat: 'yy/mm/dd', //年月日のフォーマット
});

minDateやmaxDateは日付指定も可能。

サンプル

https://taitan916.info/sample/jquery-ui-datepicker/index2.php

特定の日にClass付与&選択不可

ソースコード

//特定の日指定
var sample_holiday = ['2021-06-23', '2021-07-01']

$("#date").datepicker({
    minDate: 0, //最小は本日まで
    maxDate: 30, //最大は30日後まで
    dateFormat: 'yy-mm-dd', //年月日のフォーマット
    beforeShowDay: function(date) {

        //特定の日にClass付与&選択不可
        for (var i = 0; i < sample_holiday.length; i++) {
            var holiday = new Date(Date.parse(sample_holiday[i]));
            if (holiday.getYear() == date.getYear() &&
                holiday.getMonth() == date.getMonth() &&
                holiday.getDate() == date.getDate()) {
                return [false, 'sample_holiday', null];
            }
        }

        return [true, 'day-weekday', null];
    },
});

特定の日付にClassを付与するオプションというのがjQueryプラグインのDateTimePickerには無かった為、今回jQuery UIを利用している。

[false, 'sample_holiday', null]

上記の第1引数部分でカレンダーの選択可否を設定、第2引数でClass名を指定できる。

サンプル

https://taitan916.info/sample/jquery-ui-datepicker/index3.php

所感

jQueryプラグインのDateTimePickerで困った時にGoogle検索するとjQuery UI版の情報がヒットすることが多い。これを機にjQuery UI版にのりかえるのもありかと思った。