https://www.frees-life.com/wp-content/themes/freeslife/js/holiday-check.js

1// 👇この1行目から始めるのがベスト！
2(function() {
3    var css = `
4    input[type="date"].holidaycheck::-webkit-calendar-picker-indicator {
5        opacity: 0 !important;
6        pointer-events: none !important;
7    }`;
8    var style = document.createElement('style');
9    style.type = 'text/css';
10    style.appendChild(document.createTextNode(css));
11    document.head.appendChild(style);
12})();
13
14
15jQuery(document).ready(function($) {
16    console.log('jQuery is ready');
17    // 日付ピッカーがロードされているか確認し、必要に応じて初期化
18    if ($.fn.datepicker) {
19        console.log('Datepicker is loaded');
20
21        // #datepickerを初期化
22        if ($('#datepicker').length > 0 && !$('#datepicker').data('datepicker-initialized')) {
23            console.log('#datepicker found and initializing');
24            $('#datepicker').datepicker({
25                dateFormat: 'yy-mm-dd', // 日付形式を設定
26                onSelect: function(dateText) {
27                    console.log('Selected date from #datepicker:', dateText);
28                }
29            });
30            $('#datepicker').data('datepicker-initialized', true);
31        } else {
32            console.log('#datepicker not found or already initialized');
33        }
34
35        // .datepickerクラスを持つ要素を初期化
36        $('[class*="datepicker"]').each(function() {
37            var $input = $(this);
38            if (!$input.hasClass('holidaycheck') && !$input.data('datepicker-initialized')) {
39                console.log('.datepicker found and initializing:', $input);
40                $input.datepicker({
41                    dateFormat: 'yy-mm-dd', // 日付形式を設定
42                    onSelect: function(dateText) {
43                        console.log('Selected date from .datepicker:', dateText);
44                    }
45                });
46                $input.data('datepicker-initialized', true);
47            } else {
48                console.log('.datepicker not found or already initialized:', $input);
49            }
50        });
51
52        // .holidaycheckクラスを持つ要素を初期化
53        $('[class*="holidaycheck"]').each(function() {
54            var $input = $(this);
55            var classList = $input.attr('class').split(/\s+/);
56            var daysFromNow = 0;
57
58            // クラス名から数字を取得
59            classList.forEach(function(className) {
60                var match = className.match(/^holidaycheck(\d+)$/);
61                if (match) {
62                    daysFromNow = parseInt(match[1], 10);
63                }
64            });
65
66            if (!$input.data('datepicker-initialized')) {
67                console.log('.holidaycheck found and initializing:', $input);
68                $.ajax({
69                    url: holidayCheckParams.ajax_url,
70                    method: 'POST',
71                    data: {
72                        action: 'get_holiday_settings'
73                    },
74                    success: function(response) {
75                        console.log('Holiday settings received:', response);
76                        var holidays = JSON.parse(response);
77                        var weekdays = holidays.weekdays;
78                        var dates = holidays.dates;
79
80                        $input.datepicker({
81                            dateFormat: 'yy-mm-dd', // 日付形式を設定
82                            minDate: daysFromNow, // 指定日以降から選択可能
83                            beforeShowDay: function(date) {
84                                var day = date.getDay();
85                                var dayOfMonth = $.datepicker.formatDate('yy-mm-dd', date);
86
87                                // 曜日を無効化
88                                if (weekdays.includes(day.toString())) {
89                                    return [false, '', 'Unavailable'];
90                                }
91
92                                // 特定の日付を無効化
93                                if (dates.includes(dayOfMonth)) {
94                                    return [false, '', 'Unavailable'];
95                                }
96
97                                return [true, '', ''];
98                            },
99                            onSelect: function(dateText) {
100                                console.log('Selected date from .holidaycheck:', dateText);
101                                // 選択した日付をinputに設定
102                                $(this).val(dateText);
103                            }
104                        });
105                        $input.data('datepicker-initialized', true);
106                    },
107                    error: function(jqXHR, textStatus, errorThrown) {
108                        console.log('Error fetching holiday settings:', textStatus, errorThrown);
109                    }
110                });
111            } else {
112                console.log('.holidaycheck not found or already initialized:', $input);
113            }
114        });
115    } else {
116        console.log('Datepicker is not loaded');
117    }
118});
119
120document.addEventListener('DOMContentLoaded', function() {
121    console.log('DOM fully loaded and parsed');
122    if (document.querySelectorAll('input.holidaycheck').length > 0) {
123        console.log('Adding CSS to hide HTML5 calendar icon');
124        var style = document.createElement('style');
125        style.innerHTML = `
126            input[type="date"].holidaycheck::-webkit-calendar-picker-indicator {
127                opacity: 0;
128                pointer-events: none;
129            }
130        `;
131        document.head.appendChild(style);
132    }
133});