回答編集履歴
2
追加の質問に対する回答
test
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
1/27
|
|
6
|
+
1/27 追記①
|
|
7
|
-
すみません、回答を修正しました。。。
|
|
8
7
|
datepickerの初期化時にonSelectイベントを設定することができるので、下記のように選択された日付から要素を取得して、クラスで判断する形がよさそうです。
|
|
9
8
|
合わせて、toggleを使ってshow/hideをまとめてあげると、すっきりするかと思います。
|
|
10
9
|
```JQuery
|
|
@@ -21,4 +20,75 @@
|
|
|
21
20
|
});
|
|
22
21
|
```
|
|
23
22
|
|
|
23
|
+
------------------------------------------------------------
|
|
24
24
|
|
|
25
|
+
1/31 追記②
|
|
26
|
+
> 土曜日と祝日が重なった場合の日を選ぶと土曜日のプルダウンが出てくるようにするにはどうすれば良いでしょうか？
|
|
27
|
+
> 土曜日と祝日が重なった場合土曜が優先されるように、～と並び順を逆にしましたが解決しません。
|
|
28
|
+
|
|
29
|
+
まず、なぜそうなるかの原因の話をします。
|
|
30
|
+
土曜かつ祝日の場合に祝日扱いになる原因は、beforeShowDayでクラスを設定する際に土曜かつ祝日の場合は祝日のクラスのみ設定されるためです。
|
|
31
|
+
```ここに言語を入力
|
|
32
|
+
beforeShowDay:function(date) {
|
|
33
|
+
var holiday = $.datepicker.formatDate(dateFormat, date);
|
|
34
|
+
console.log(holiday);
|
|
35
|
+
// 2/11(祝日かつ土曜)は①の条件が適用されreturnするため、③の条件は適用されずsaturdayクラスはつかない
|
|
36
|
+
|
|
37
|
+
// ①
|
|
38
|
+
if($.inArray(holiday,holidays)>-1) return [true,'holiday',''];
|
|
39
|
+
|
|
40
|
+
// ②
|
|
41
|
+
if(date.getDay()==0) return [false,'sunday',''];
|
|
42
|
+
|
|
43
|
+
// ③
|
|
44
|
+
if(date.getDay()==6) return [true,'saturday',''];
|
|
45
|
+
return [true,'heijitu',''];
|
|
46
|
+
},
|
|
47
|
+
```
|
|
48
|
+
実際に土曜かつ祝日の2/11の日付を開発者ツールで見てみると、「holiday」クラスのみで、「saturday」クラスはついていないことがわかります。
|
|
49
|
+
|
|
50
|
+
そうすると、以下のコードでは、クラスの有無のみで判定して表示非表示を切り替えているので、2/11は祝日扱いになってしまうことがわかると思います。
|
|
51
|
+
```JQuery
|
|
52
|
+
jQuery('select.syukujitu').toggle(date.hasClass('holiday'));
|
|
53
|
+
jQuery('select.doyou').toggle(date.hasClass('saturday'));
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
次に解決策の話です。(いろいろなやり方があるので1例です)
|
|
57
|
+
土曜かつ祝日の場合に、「holiday」クラスと「saturday」クラスの両方を付与するようにしましょう。
|
|
58
|
+
|
|
59
|
+
```jQuery
|
|
60
|
+
beforeShowDay:function(date) {
|
|
61
|
+
var holiday = $.datepicker.formatDate(dateFormat, date);
|
|
62
|
+
console.log(holiday);
|
|
63
|
+
if(date.getDay()==0) return [false,'sunday',''];
|
|
64
|
+
|
|
65
|
+
// 土曜かつ祝日の場合はholidayとsaturdayの両方のクラスがセットされるよう、以下のコードを変更
|
|
66
|
+
// if($.inArray(holiday,holidays)>-1) return [true,'holiday',''];
|
|
67
|
+
// if(date.getDay()==6) return [true,'saturday',''];
|
|
68
|
+
var setClass = [];
|
|
69
|
+
if($.inArray(holiday,holidays)>-1) { setClass.push('holiday');}
|
|
70
|
+
if(date.getDay()==6) {setClass.push('saturday');}
|
|
71
|
+
if(setClass.length) {return [true, setClass.join(' '),'']};
|
|
72
|
+
|
|
73
|
+
return [true,'heijitu',''];
|
|
74
|
+
},
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
これで、土曜かつ祝日の2/11の日付に「holiday」クラスと「saturday」クラスの両方がつくようになりました。
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
ただし、これだけだと、土曜と祝日の両方のプルダウンが表示されることになります。
|
|
81
|
+
そのため、onSelectの処理を変更して、土曜の場合は祝日のプルダウンは表示しないようにします。
|
|
82
|
+
```jQuery
|
|
83
|
+
onSelect:function(data,inst){
|
|
84
|
+
let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent();
|
|
85
|
+
jQuery('select.heijitu').toggle(date.hasClass('heijitu'));
|
|
86
|
+
jQuery('select.doyou').toggle(date.hasClass('saturday'));
|
|
87
|
+
jQuery('select.syukujitu').toggle(date.hasClass('holiday')&& !date.hasClass('saturday')); // 祝日かつ土曜でない場合に表示、に変更
|
|
88
|
+
|
|
89
|
+
},
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
上記のような形で、HTMLやスクリプト関係は、開発者ツールでクラスを見たりconsole.dirでオブジェクトの状態を見たりして、現状と原因を特定してから修正するようにすると解決しやすいです。
|
|
93
|
+
また、できれば当初の疑問が解決したらそれはクローズして別で質問したほうが回答も付きやすいかと思います。
|
|
94
|
+
初めのうちはいろいろ躓くことも多いかもしれませんが、頑張ってください！
|
1
内容の修正
test
CHANGED
|
@@ -1,26 +1,24 @@
|
|
|
1
|
-
|
|
2
1
|
> .holidayをクリックすると平日と土曜の選択肢が消えるようにしたつもりですが無理でした。
|
|
3
2
|
開発者ツールで見てみたところ、holidayクラスが付与されているのは日付のtdタグですが、クリックされるのはその子要素のaタグなので、 $('.holiday').clickのイベントが発火しないのだと思います。
|
|
4
3
|
|
|
5
4
|
|
|
6
|
-
選択した日付のtdタグには「data-handler="selectDay"」が付与されるので、その要素を取得してholidayクラスが付与されているかどうかを判定してあげれば、祝日判定ができます。
|
|
7
5
|
|
|
6
|
+
1/27 修正
|
|
7
|
+
すみません、回答を修正しました。。。
|
|
8
|
+
datepickerの初期化時にonSelectイベントを設定することができるので、下記のように選択された日付から要素を取得して、クラスで判断する形がよさそうです。
|
|
9
|
+
合わせて、toggleを使ってshow/hideをまとめてあげると、すっきりするかと思います。
|
|
8
|
-
```
|
|
10
|
+
```JQuery
|
|
9
|
-
// ここからifで振り分けたり、色々やりたい処理を の箇所を変更します
|
|
10
|
-
if(youbi==6){
|
|
11
|
-
// 土曜 ※祝日かつ土曜の場合は、土曜扱いになります
|
|
12
|
-
|
|
11
|
+
$('.test').datepicker({
|
|
12
|
+
beforeShowDay:function(date) {//中略(質問者さんのコードのまま変更なし)
|
|
13
|
+
},
|
|
13
|
-
|
|
14
|
+
onSelect:function(data,inst){
|
|
15
|
+
let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent();
|
|
14
|
-
|
|
16
|
+
jQuery('select.heijitu').toggle(date.hasClass('heijitu'));
|
|
17
|
+
jQuery('select.doyou').toggle(date.hasClass('saturday'));
|
|
15
|
-
|
|
18
|
+
jQuery('select.syukujitu').toggle(date.hasClass('holiday'));
|
|
16
|
-
|
|
19
|
+
|
|
17
|
-
jQuery('.heijitu').hide();
|
|
18
|
-
jQuery('.doyou').hide();
|
|
19
|
-
jQuery('.syukujitu').show();
|
|
20
|
-
}else{
|
|
21
|
-
// 平日
|
|
22
|
-
jQuery('.heijitu').show();
|
|
23
|
-
jQuery('.doyou').hide();
|
|
24
|
-
jQuery('.syukujitu').hide();
|
|
25
|
-
}
|
|
20
|
+
},
|
|
21
|
+
});
|
|
26
22
|
```
|
|
23
|
+
|
|
24
|
+
|