● jqueryとbootstrapのカレンダーで日本の祝日を表示する

http://0-oo.net/sbox/javascript/google-calendar-holidays
こちらのスクリプトがとてもよくできているのでありがたく使わせていただきます。

● デモを見てみる

jQuery UI Datepickerに祝日を表示するデモ

● jscssファイルの読み込みとスタイルの上書き

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<script src="https://g.0-oo.net/gcalendar-holidays.js"></script>
<style>
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: white !important;
    background-color: rgb(0, 127, 255) !important;
}
</style>

● カレンダー用フォームの設置

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

● カレンダースクリプトの起動

<script>
$(function() {
    var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    $("#test").datepicker({
        prevText: '前月',
        nextText: '次月',
        // changeYear: true,
        // changeMonth: true,
        yearSuffix: "年",
        showMonthAfterYear: true,
        monthNames: months,
        monthNamesShort: months,
        firstDay: 1,
        dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
        showButtonPanel: true,
        currentText: '今日',
        closeText: '閉じる',
        dateFormat: "yy/m/d"
    });
    $("#test").focus();
});
</script>

● bootstrapで使用する場合

bootstrapにはbootstrap datepicker と言うのがありますが 無視してjQuery datepicker を使用する方が応用がきくのでおすすめです。

・bootstrap版が使いたい場合はこちらからどうぞ
https://github.com/tempusdominus/bootstrap-4

・bootstrap非依存版
https://github.com/tempusdominus/datetimepicker