投稿2023/01/26 03:15
編集2023/07/27 01:57
wordpressのエレメンターにて、contctform7で予約フォームを作っており、datapickerカレンダーで平日・土曜・祝日を選ぶごとに選べる選択肢を変えたいのですが上手くいきません。
お願いします。助けてください。
平日・土曜はgatDayの数字でまだ振り分けられるのですが、祝日はgatDayの数字がついていないので選んだ状態をどう取得すればいいのか分かりません。
datepickerはコンタクトフォーム7のものを使用しています。
・祝日を選択したら、コンタクトフォーム7の営業時間の祝日が出てきて、平日と土曜の選択肢は消す。
・土曜を選択したら、コンタクトフォーム7の営業時間の土曜が出てきて、平日と祝日の選択肢は消す。
↓で対応しようとしても上手くいくどころか、カレンダーの土曜や祝日判定が消えます。
JQuery
1<!-- <script> 2 $(function() { 3 4 $('.holiday').click(function(){ 5 $('.doyou').hide(); 6 $('.heijitu').hide(); 7 $('.syukujitu').show(); 8 }); 9 }); 10 11 </script> -->
jQuery
1 2```<script> 3 console.log('読み込み成功1'); 4 5 $(function(){ 6 var holidays = [ 7 "20230211", 8 "20230223", 9 ]; 10 var dateFormat='yymmdd'; 11 $('.test').datepicker({ 12 beforeShowDay:function(date) { 13 var holiday = $.datepicker.formatDate(dateFormat, date); 14 console.log(holiday); 15 if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; 16 if(date.getDay()==0) return [false,'sunday','']; 17 if(date.getDay()==6) return [true,'saturday','']; 18 return [true,'heijitu','']; 19 } 20 }); 21 }); 22 console.log('読み込み成功'); 23 </script> 24 <input class="date"> 25 <script> 26 27 28// 日曜日を非表示 29 30 jQuery(function($){ 31jQuery(".test").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい 32var fDate =jQuery('.test').datepicker('getDate'); 33if (fDate !== null) { 34 fDate instanceof Date; 35 var youbi = fDate.getDay(); 36 alert(youbi);//試しにわかりやすくalertで取得できてるか確認 37 // ここからifで振り分けたり、色々やりたい処理を 38 if(youbi==6){ 39 jQuery('.heijitu').hide(); 40 41 jQuery('.doyou').show(); 42 }else{ 43 44 jQuery('.heijitu').show(); 45 jQuery('.doyou').hide(); jQuery(function(){ jQuery('.test').datepicker(); 46 47 48 49 } 50 51 52 53}; 54}); 55}); 56 57 58 59</script> 60<!-- <script> 61 $(function() { 62 63 $('.holiday').click(function(){ 64 $('.doyou').hide(); 65 $('.heijitu').hide(); 66 $('.syukujitu').show(); 67 }); 68 }); 69 70 </script> -->
contactform7
1コード 2```<label> 氏名 3 [text* your-name autocomplete:name] </label> 4 5<label> メールアドレス 6 [email* your-email autocomplete:email] </label> 7 8<label> 題名 9 [text* your-subject] </label> 10 11<label>予約カレンダー 12[text* date-reserve5 id:reserve-date class:test] 13</label> 14[select menu-530 id:select1 class:heijitu "平日" "犬" "猫"] 15[select menu-530 id:select2 class:doyou "土曜" "犬2" "猫2"] 16[select menu-530 id:select3 class:syukujitu "祝日" "犬3" "猫3"] 17<label> メッセージ本文 (任意) 18 [textarea your-message] </label> 19 20[submit "送信"]
.holidayをクリックすると平日と土曜の選択肢が消えるようにしたつもりですが無理でした。
※また、onSelectオプションを使って、カレンダーの選択日（祝日と一致したら）によって営業時間の選択肢を変えようかと思いましたが、↓と他のコード（曜日振り分け）が共存しません。助けてください。↓をスクリプトの一番下に書いてもこれが動作しません
$(function() {
$('.test').datepicker({
onSelect: function(dateText) {
alert(dateText);
}
});
});
回答1件
0
ベストアンサー
.holidayをクリックすると平日と土曜の選択肢が消えるようにしたつもりですが無理でした。
開発者ツールで見てみたところ、holidayクラスが付与されているのは日付のtdタグですが、クリックされるのはその子要素のaタグなので、 $('.holiday').clickのイベントが発火しないのだと思います。
1/27 追記①
datepickerの初期化時にonSelectイベントを設定することができるので、下記のように選択された日付から要素を取得して、クラスで判断する形がよさそうです。
合わせて、toggleを使ってshow/hideをまとめてあげると、すっきりするかと思います。
JQuery
1$('.test').datepicker({ 2 beforeShowDay:function(date) {//中略(質問者さんのコードのまま変更なし) 3 }, 4 onSelect:function(data,inst){ 5 let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent(); 6 jQuery('select.heijitu').toggle(date.hasClass('heijitu')); 7 jQuery('select.doyou').toggle(date.hasClass('saturday')); 8 jQuery('select.syukujitu').toggle(date.hasClass('holiday')); 9 10 }, 11 });
1/31 追記②
土曜日と祝日が重なった場合の日を選ぶと土曜日のプルダウンが出てくるようにするにはどうすれば良いでしょうか？
土曜日と祝日が重なった場合土曜が優先されるように、～と並び順を逆にしましたが解決しません。
まず、なぜそうなるかの原因の話をします。
土曜かつ祝日の場合に祝日扱いになる原因は、beforeShowDayでクラスを設定する際に土曜かつ祝日の場合は祝日のクラスのみ設定されるためです。
beforeShowDay:function(date) { var holiday = $.datepicker.formatDate(dateFormat, date); console.log(holiday); // 2/11(祝日かつ土曜)は①の条件が適用されreturnするため、③の条件は適用されずsaturdayクラスはつかない // ① if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; // ② if(date.getDay()==0) return [false,'sunday','']; // ③ if(date.getDay()==6) return [true,'saturday','']; return [true,'heijitu','']; },
実際に土曜かつ祝日の2/11の日付を開発者ツールで見てみると、「holiday」クラスのみで、「saturday」クラスはついていないことがわかります。
そうすると、以下のコードでは、クラスの有無のみで判定して表示非表示を切り替えているので、2/11は祝日扱いになってしまうことがわかると思います。
JQuery
1jQuery('select.syukujitu').toggle(date.hasClass('holiday')); 2jQuery('select.doyou').toggle(date.hasClass('saturday'));
次に解決策の話です。(いろいろなやり方があるので1例です)
土曜かつ祝日の場合に、「holiday」クラスと「saturday」クラスの両方を付与するようにしましょう。
jQuery
1 beforeShowDay:function(date) { 2 var holiday = $.datepicker.formatDate(dateFormat, date); 3 console.log(holiday); 4 if(date.getDay()==0) return [false,'sunday','']; 5 6 // 土曜かつ祝日の場合はholidayとsaturdayの両方のクラスがセットされるよう、以下のコードを変更 7 // if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; 8 // if(date.getDay()==6) return [true,'saturday','']; 9 var setClass = []; 10 if($.inArray(holiday,holidays)>-1) { setClass.push('holiday');} 11 if(date.getDay()==6) {setClass.push('saturday');} 12 if(setClass.length) {return [true, setClass.join(' '),'']}; 13 14 return [true,'heijitu','']; 15 },
これで、土曜かつ祝日の2/11の日付に「holiday」クラスと「saturday」クラスの両方がつくようになりました。
ただし、これだけだと、土曜と祝日の両方のプルダウンが表示されることになります。
そのため、onSelectの処理を変更して、土曜の場合は祝日のプルダウンは表示しないようにします。
jQuery
1 onSelect:function(data,inst){ 2 let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent(); 3 jQuery('select.heijitu').toggle(date.hasClass('heijitu')); 4 jQuery('select.doyou').toggle(date.hasClass('saturday')); 5 jQuery('select.syukujitu').toggle(date.hasClass('holiday')&& !date.hasClass('saturday')); // 祝日かつ土曜でない場合に表示、に変更 6 7 },
上記のような形で、HTMLやスクリプト関係は、開発者ツールでクラスを見たりconsole.dirでオブジェクトの状態を見たりして、現状と原因を特定してから修正するようにすると解決しやすいです。
また、できれば当初の疑問が解決したらそれはクローズして別で質問したほうが回答も付きやすいかと思います。
初めのうちはいろいろ躓くことも多いかもしれませんが、頑張ってください！
投稿2023/01/26 07:04
編集2023/01/31 09:25
総合スコア125
あなたの回答
tips
プレビュー
Q&A
