jQuery UI のdatepickerが反応しない

###前提・実現したいこと
jQueryのdatepickerで過去の日付と水曜日、年始の休業日を選択不可にしたい

###該当のソースコード

js
1    <script>
2      $(function() { // 休業日の設定
3        $("#datepicker, #datepicker02").change( function() {
4            holidays = ['2018/01/01', '2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05'];
5            list = [
6                [true, 'sunday'],
7                [true, ''],
8                [true, ''],
9                [false, ''],
10                [true, ''],
11                [true, ''],
12                [true, 'saturday'],
13            ];
14            console.log('1');
15          });
16        $("#datepicker, #datepicker02").datepicker({
17            // Option
18            minDate: 0, // 過去の日付選択不可
19            beforeShowDay: function(date) {
20                // 休日の判定
21                for (var i = 0; i < holidays.length; i++) {
22                    var htime = Date.parse(holidays[i]);
23                    var holiday = new Date();
24                    holiday.setTime(htime);
25
26                    // 祝日
27                    if (holiday.getYear() == date.getYear() &&
28                    holiday.getMonth() == date.getMonth() &&
29                    holiday.getDate() == date.getDate()) {
30                        return [false, 'holiday'];
31                        console.log('2');
32                    }
33                }
34                return(list[date.getDay()]);
35                console.log('3');
36            },
37
38            onClose: function(dateText, inst) {
39                $("#datepicker,#datepicker02").blur();
40            }
41        });
42      });
43
44      $(function() {
45        $("#datepicker").datepicker();
46      });
47      $(function() {
48        $("#datepicker02").datepicker();
49      });
50    </script>

html
1<dl class="form">
2  <dt>お名前<strong class="red">(必須)</strong></dt>
3  <dd>
4    <input type='text'   name='text0' class='size1' value='' size='10' maxlength='' />
5  </dd>
6</dl>
7<dl class="form kaiin">
8  <dt>フリガナ<strong class="red">(必須)</strong></dt>
9  <dd>
10    <input type='text'   name='text1' class='size1' value='' size='20' maxlength='' />
11  </dd>
12</dl>
13<dl class="form">
14   <dt>ご希望日時</dt>
15   <dd class="time">
16     <em>第一希望<strong class="red">(必須)　年始の1/1～1/5はお休みいたします。</strong></em><br />　<!-- 一つ目のdatepicker -->
17     <input type='text' name='text2' readonly id='datepicker' size='10' />
18     <select name='select1'>
19	<option value='' selected selected>-</option>
20	<option value='11：00'>11：00</option>
21	<option value='11：30'>11：30</option>
22	<option value='12：00'>12：00</option>
23	<option value='12：30'>12：30</option>
24	<option value='13：00'>13：00</option>
25	<option value='13：30'>13：30</option>
26	<option value='14：00'>14：00</option>
27	<option value='14：30'>14：30</option>
28	<option value='15：00'>15：00</option>
29      </select>
30                  ～
31      <select name='select2'>
32	<option value='' selected selected>-</option>
33	<option value='11：00'>11：00</option>
34	<option value='11：30'>11：30</option>
35	<option value='12：00'>12：00</option>
36	<option value='12：30'>12：30</option>
37	<option value='13：00'>13：00</option>
38	<option value='13：30'>13：30</option>
39	<option value='14：00'>14：00</option>
40	<option value='14：30'>14：30</option>
41	<option value='15：00'>15：00</option>
42      </select>
43
44      <br />
45      <em>第二希望</em><br />
46      <input type='text' name='text3' readonly id='datepicker02' size='10' />  <!-- 二つ目のdatepicker -->
47      <select name='select3'>
48	<option value='' selected selected>-</option>
49	<option value='11：00'>11：00</option>
50	<option value='11：30'>11：30</option>
51	<option value='12：00'>12：00</option>
52	<option value='12：30'>12：30</option>
53	<option value='13：00'>13：00</option>
54	<option value='13：30'>13：30</option>
55	<option value='14：00'>14：00</option>
56	<option value='14：30'>14：30</option>
57	<option value='15：00'>15：00</option>
58      </select>
59                  ～
60      <select name='select4'>
61	<option value='' selected selected>-</option>
62	<option value='11：00'>11：00</option>
63	<option value='11：30'>11：30</option>
64	<option value='12：00'>12：00</option>
65	<option value='12：30'>12：30</option>
66	<option value='13：00'>13：00</option>
67	<option value='13：30'>13：30</option>
68	<option value='14：00'>14：00</option>
69	<option value='14：30'>14：30</option>
70	<option value='15：00'>15：00</option>
71      </select>
72
73  </dd>
74</dl>

###試したこと
下記の先人様の質問などを参考にさせていただきました。
https://teratail.com/questions/85816
https://qiita.com/mnrck07/items/f8d9b004f5505494e3ce
http://www.aipacommander.com/entry/2015/07/20/123520
http://www.northwind.mydns.jp/samples/datepicker_sample7.php

おかげさまで二つ目のカレンダーの#datepicker02は指定した年始の日と水曜日が選択不可にできたのですが、なぜか一つ目の#datepickerは過去の日付にも戻れてしまい、年始も選択できてしまいます。定休日の水曜日も選択可能でした。

どちらも同じように書いてあるつもりなのですが、何が違っているのでしょうか。
自分では見当がつきません。どなたか知恵をお貸しいただけると助かります。

こちらのサイトでは初めて質問させていただきますので、何か不備がありましたらお手数ですがご指摘をお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

提示されたコードをjsFiddleで再現してみましたが、そもそも動かなかったので一部修正しました。
これなら正しく動いています。

before

javascript
1
2        $("#datepicker, #datepicker02").change( function() {
3            holidays = ['2018/01/01', '2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05'];
4            list = [
5                [true, 'sunday'],
6                [true, ''],
7                [true, ''],
8                [false, ''],
9                [true, ''],
10                [true, ''],
11                [true, 'saturday'],
12            ];
13            console.log('1');
14          });

after

javascript
1        // changeの外にholidaysとlistの定義を出す
2        holidays = ['2018/01/01', '2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05'];
3        list = [
4            [true, 'sunday'],
5            [true, ''],
6            [true, ''],
7            [false, ''],
8            [true, ''],
9            [true, ''],
10            [true, 'saturday'],
11        ];
12        $("#datepicker, #datepicker02").change( function() {
13            console.log('1');
14          });

https://jsfiddle.net/cdL3734x/1/

投稿2017/11/01 07:24

masaya_ohashi

総合スコア9210

masaya_ohashi

2017/11/01 07:25

そもそもこのchangeが何をしたかったのかわからなかったので、とりあえずconsole.log("1")の為に残してありますが、意味が無いように見えます。

zz34

2017/11/01 07:43

masaya_ohashi様早急な回答ありがとうございました！提示して頂いたリンク先も拝見しました。貴重なお時間を割いていただき、誠にありがとうございます。ソースコードを直しましたら思い通りの動きになっていました。本当にありがとうございました。 chengeがいけなかったのですね。全く注視していませんでした。なぜいけなかったのか、これから検証して調べてみます。ありがとうございました。

masaya_ohashi

2017/11/01 07:46

changeの中に書いた処理は$(...)の中で指定した要素が「書き換わったとき」に処理されるものです。つまり#datepicker、および#datepicker02が変更されたときです。しかし、holidaysとlistは変更される前から必要なものですので、changeの中にあっては動作しない、ということです。

zz34

2017/11/01 08:22

masaya_ohashi様説明までしていただき、ありがとうございます。書き変わった時がトリガーなのですね、うろ覚えどころか全く違う処理だと勘違いしておりました。参考サイト様のコードを写しただけでよく調べずに質問してしまい、お時間を取らせてしまって申し訳ございません。大変参考になりました、ありがとうございます！

行動規範の内容に同意します