Bootstrap Datepicker カレンダーに、日本の祝日をマークする

元々、１０年程前に Java で日本の祝日を求めるものを作って公開したのだが、
数年前に JavaScript 版も作っていた。jQuery - UI の datepicker で祝日をマークする為だった。

JavaScript 版も、バージョン 1.4 では、JHoliday.descriptionDate(date) にバグがあったので、
1.5 で修正し公開した。
Java祝日計算 プロジェクト日本語トップページ - OSDN

これを機に、Bootstrap の datepicker も対応してみる。
1.5 として配布した jholiday.js はそのままで変更はない。
以下のように、日本の祝日の日付文字色を赤くして、ツールチップで祝日説明をする。

JavaScript 版 1.5 をダウンロードして、他のＪＳ、CSS を CDNサイトで書くと、、

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"  rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css"  rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ja.min.js"></script>
<script src="jholiday.js"></script>

Bootstrap datepicker にする input タグ

<div class="col-md-2">
   <input type="text" class="form-control" id="sample">
</div>

ＣＳＳ

.datepicker-days th.dow:first-child, .datepicker-days td:first-child{
    color: #ff0000;
}
.datepicker-days th.dow:last-child, .datepicker-days td:last-child{
    color: #0000ff;
}
.datepicker-days thead{
   border-bottom: 1px solid #cccccc;
}
.datepicker-days .holiday{
    color: #ff0000;
}

Bootstrap datepicker の指定

$('#sample').datepicker({
    format: 'yyyy/mm/dd',
    language:'ja',
    todayHighlight: true,
    enableOnReadonly: true,
    templates: {
       leftArrow: '＜',
       rightArrow: '＞'
    },
    beforeShowDay: function(date){
        if (JHoliday.isHolidayDate(date)==1){
           return {
             classes: 'holiday', tooltip:JHoliday.descriptionDate(date)
          };
        }
    },
});

beforeShowDay　オプションでカレンダー日付表示前の
カレンダー表示日すべてが、Date型オブジェクトで関数を実行で戻り値に、
日付表示の class属性などを指定できる。
詳細は、↓
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#beforeshowday
これを利用して、JavaScript 版祝日計算で、祝日判定と descriptionDate で
祝日名称を取得して、ツールチップ表示させるようにする。

後日、このＨＴＭＬサンプルを JavaScript 版 1.51 として配布しようと思う。
jholiday.js は、1.5 のまま変更なしで、サンプル配布として追加するだけなので、1.51 である。