【jQuery UI Datepicker】内閣府で配布しているcsvから祝日を判定しようぜ

経緯

今年（2019年）ゴールデンウイークは10連休になる。
カレンダーでここだけ祝日表示とか対応するの面倒ですね。

というか、そもそも〇月の第△×曜日とかいちいち計算するのって面倒ではないですかね？
今年みたいに、いつ休日が特例で変わっちゃうかもわからないですし。

内閣府の祝日についての説明があるのですが、なんとここに毎年休日をまとめたcsvが存在しているようで。

もうここから祝日を読んで対応すればいいのでは？？

今回もjQueryのDatepickerさんを使わせていただきます。

やること

csvから祝日を読んで対象日を赤文字にする。

コード

csvを直接読むわけにはいかないので、ファイルをどこかに置く想定です。

index.html

<input type="text" id="datepicker">

<!-- JSさんたち -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script src="/script.js" defer></script>

script.js

//祝日読み取り
var holidays = [];
let req = new XMLHttpRequest();
req.open("get", "[syukujitsu.csvのパス]", true);
req.overrideMimeType('text/plain; charset=Shift_JIS');
req.send(null);

req.onload = function(){
  holidays = convertCSVtoArray(req.responseText);
}
req.onerror = function() {
  alert('失敗しました');
  window.stop();
}

//csvを配列化
function convertCSVtoArray(str){
    let tmp = str.split("\n");
    tmp.shift();
    let result = [];
    let date = "";

    for(let i=0;i<tmp.length;i++){
      if(!tmp[i]) continue;
      result[i] = tmp[i].split(',');
      date = new Date(result[i][0]);
      result[i][0] = getDayStr(date)
    }

    return result;
};

//日付をcsvのフォーマットに合わせる（yy/mm/dd）
function getDayStr(date){
  let yy = date.getFullYear();
  let mm = ("0" + (date.getMonth() + 1)).slice(-2);
  let dd = ("0" + date.getDate()).slice(-2);
  return yy + '/' + mm + '/' + dd;
}

$(document).ready(function(){
  function isHoliday(dayStr){
    for(let i=0;i<holidays.length;i++){
      if(holidays[i][0] === dayStr){
        return true;
      }
    }
    return false;
  }

  $( "#datepicker" ).datepicker({
    beforeShowDay: function(date) {
      if(isHoliday(getDayStr(date))){
        return [true,"ui-test"];
      }
      return [true]
    }
  });
});

style.css

.ui-test .ui-state-default {
  color : #FF0000 !important;
}

beforeShowDayの戻り値

3つを配列にして渡す必要があります

[日付の表示非表示(boolean),付与するクラス名,カレンダーにマウスを合わせた時のポップアップ文字]

今回は"ui-test"クラスを付与して対象文字を赤くするようにしています。
holidays配列から祝日名を戻り値3に充てれば祝日名を表示することもできます。
面倒なのでやっていない

結果

こんな感じ
一身上の都合により日曜日も赤く表示しています。