前提
wordpressのエレメンターにて、contctform7で予約フォームを作っており、datapickerカレンダーで平日・土曜・祝日を選ぶごとに選べる選択肢を変えたいのですが上手くいきません。
お願いします。助けてください。
平日・土曜はgatDayの数字でまだ振り分けられるのですが、祝日はgatDayの数字がついていないので選んだ状態をどう取得すればいいのか分かりません。
datepickerはコンタクトフォーム7のものを使用しています。
実現したいこと
- ・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件
あなたの回答
tips
プレビュー