jQuery DateTimePicker 土日・祝日対応

jQueryプラグイン DateTimePicker で

• 土日に色をつける
• 祝日も色をつける
• 土日祝は無効
• 明日以降のみ有効

の実装例。

<input class="datetimepicker">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/xdan/datetimepicker@latest/build/jquery.datetimepicker.min.css">
<style>
/* 土日祝の色 */
.xdsoft_calendar td.jp_holiday,
.xdsoft_calendar th:nth-child(1),
.xdsoft_calendar td.xdsoft_day_of_week0 { background: #ffe8e8 !important; }
.xdsoft_calendar th:nth-child(7),
.xdsoft_calendar td.xdsoft_day_of_week6 { background: #eaf0ff !important; }
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/xdan/datetimepicker@latest/build/jquery.datetimepicker.full.js"></script>
<script>
(function($){
    // 祝日取得
    $.get('https://holidays-jp.github.io/api/v1/date.json', function( holidays ){
        // 日本語
        $.datetimepicker.setLocale('ja');
        // ピッカー開始
        $('input.datetimepicker').datetimepicker({
            // 祝日無効
            formatDate: 'Y-m-d',
            disabledDates: Object.keys(holidays),
            // 祝日に色
            onShow: jpHoliday,
            onChangeMonth: jpHoliday,
            // 土日無効
            disabledWeekDays: [0, 6],
            // 明日以降有効
            minDate: '+1970/01/02'
        });
        // 祝日にクラス付与
        function jpHoliday(){
            setTimeout(function(){
                $('.xdsoft_calendar td.xdsoft_disabled').each(function(){
                    var $d = $(this);
                    var Y = $d.data('year');
                    var M = $d.data('month') + 1;
                    var D = $d.data('date');
                    var YMD = [Y, ('0' + M).slice(-2), ('0' + D).slice(-2)].join('-');
                    if( YMD in holidays ) $d.addClass('jp_holiday');
                });
            }, 50);
        }
    });
})(jQuery);
</script>

祝日データは Holidays JP API を利用しています。