Q&A
記述ミスですみませんでした。再度書き直しておきましたので、ぜひご教授お願いします。
店舗ごとの休日別選択
上記の参考のもとに、バージョンアップのつもりで質問させてください。
jQuery UI のお問い合わせフォーム欄に「カレンダー」を実装していますが…
実行したい内容
・店（店舗A）を選択後、カレンダー通りに、選べるようにしたい。
・店ごとの休日が異なるため、カレンダー別に設定したい。
・店が定める営業時間内に選べるようにしたい。
例：
A店舗
・通常時間 月曜日～金曜日 10:00～20:00
・土曜時間 10:00～15:00
・祝日時間 9:00～16:00
・休日 日曜日
B店舗
・通常時間 水曜日～金曜日 10:00～20:00
・土曜時間 10:00～15:00
・祝日時間 9:00～16:00
・休日 日曜日・月曜日・火曜日
C店舗
・通常時間 月曜日・水曜日・金曜日 10:00～20:00
・通常時間 火曜日・木曜日 9:00～15:00
・土曜時間 10:00～15:00
・休日 日曜日・祝日
ご教授お願いします。
※holiday.js
祝日設定（外部ホームページから参考）
カレンダー選択・時間選択
jQuery(document).ready(function($){ //ラジオボタンが選択されない場合 var radio=$('input:radio[name="ご希望店舗名"]:checked').val(); if(radio == null){ $('input[name="第1希望日"]').val('店舗を選択してください'); $('input[name="第2希望日"]').val('店舗を選択してください'); } $( 'input[name="ご希望店舗名"]:radio' ).change( function() { // Shop A if($( this ).attr('id') == 'shop_a'){ // 第1希望日時 $('input[name="第1希望日"]').val(''); $('select[name="第1希望時"]').val(''); $('input[name="第1希望日"]').attr("id",""); $('input[name="第1希望日"]').attr("class",""); $('input[name="第1希望日"]').addClass("datepicker"); $('input[name="第1希望日"]').attr('readonly',true); // 第2希望日時 $('input[name="第2希望日"]').val(''); $('select[name="第2希望時"]').val(''); $('input[name="第2希望日"]').attr("id",""); $('input[name="第2希望日"]').attr("class",""); $('input[name="第2希望日"]').addClass("datepicker"); $('input[name="第2希望日"]').attr('readonly',true); // カレンダー入力項目 $('.datepicker').datepicker({ minDate: 0, beforeShowDay: function(day) { var dd = day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate(); var hName = ktHolidayName(dd); // 休日・営業設定 if ( day.getDay() == 1 ) return [false,'','休診日']; if ( day.getDay() == 3 ) return [false,'','休診日']; if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','10:00?18:00']; return [true,'','11:00?20:00']; }, // 時間設定 onSelect: function(dateText, obj) { var date1 = $(this).datepicker( 'getDate' ) || new Date(); var the_day=date1.getDay(); var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate(); var hName = ktHolidayName(dd); if(the_day == 0 || hName != ""){ dateText+='<option value="">時間帯を選択</option><option value="10:00">10:00</option><option value="10:30">10:30</option><option value="11:00">11:00</option><option value="11:30">11:30</option><option value="12:00">12:00</option><option value="12:30">12:30</option><option value="13:00">13:00</option><option value="13:30">13:30</option><option value="14:00">14:00</option><option value="14:30">14:30</option><option value="15:00">15:00</option><option value="15:30">15:30</option><option value="16:00">16:00</option><option value="16:30">16:30</option><option value="17:00">17:00</option>'; }else{ dateText+='<option value="">時間帯を選択</option><option value="12:00">12:00</option><option value="12:30">12:30</option><option value="13:00">13:00</option><option value="13:30">13:30</option><option value="14:00">14:00</option><option value="14:30">14:30</option><option value="15:00">15:00</option><option value="15:30">15:30</option><option value="16:00">16:00</option><option value="16:30">16:30</option><option value="17:00">17:00</option><option value="17:30">17:30</option><option value="18:00">18:00</option><option value="18:30">18:30</option><option value="19:00">19:00</option>'; }if($(this).attr('name') == '第1希望日'){ $('select[name="第1希望時"] option').remove(); $('select[name="第1希望時"]').append(dateText); }if($(this).attr('name') == '第2希望日'){ $('select[name="第2希望時"] option').remove(); $('select[name="第2希望時"]').append(dateText); } } }); // Shop B } else if($(this).is('#shop_b')){ // 第1希望日時 $('input[name="第1希望日"]').val(''); $('select[name="第1希望時"]').val(''); $('input[name="第1希望日"]').attr("id",""); $('input[name="第1希望日"]').attr("class",""); $('input[name="第1希望日"]').addClass("datepicker"); $('input[name="第1希望日"]').attr('readonly',true); // 第2希望日時 $('input[name="第2希望日"]').val(''); $('select[name="第2希望時"]').val(''); $('input[name="第2希望日"]').attr("id",""); $('input[name="第2希望日"]').attr("class",""); $('input[name="第2希望日"]').addClass("datepicker"); $('input[name="第2希望日"]').attr('readonly',true); // カレンダー入力項目 $('.datepicker').datepicker({ minDate: 0, beforeShowDay: function(day) { var dd = day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate(); var hName = ktHolidayName(dd); // 休日・営業設定 if ( day.getDay() == 0 ) return [false,'','休診日']; if ( day.getDay() == 1 ) return [false,'','休診日']; if ( day.getDay() == 2 ) return [false,'','休診日']; if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','10:00?20:00']; return [true,'','10:00?15:00']; }, // 時間設定 onSelect: function(dateText, obj) { var date1 = $(this).datepicker( 'getDate' ) || new Date(); var the_day=date1.getDay(); var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate(); var hName = ktHolidayName(dd); if(the_day == 0 || hName != ""){ dateText+='<option value="">時間帯を選択</option><!-- 以下省略 -->'; }else{ dateText+='<option value="">時間帯を選択</option><!-- 以下省略 -->'; }if($(this).attr('name') == '第1希望日'){ $('select[name="第1希望時"] option').remove(); $('select[name="第1希望時"]').append(dateText); }if($(this).attr('name') == '第2希望日'){ $('select[name="第2希望時"] option').remove(); $('select[name="第2希望時"]').append(dateText); } } }); // Shop C } else if($(this).attr('id') == 'shop_c'){ // 第1希望日時 $('input[name="第1希望日"]').val(''); $('select[name="第1希望時"]').val(''); $('input[name="第1希望日"]').attr("id",""); $('input[name="第1希望日"]').attr("class",""); $('input[name="第1希望日"]').addClass("datepicker"); $('input[name="第1希望日"]').attr('readonly',true); // 第2希望日時 $('input[name="第2希望日"]').val(''); $('select[name="第2希望時"]').val(''); $('input[name="第2希望日"]').attr("id",""); $('input[name="第2希望日"]').attr("class",""); $('input[name="第2希望日"]').addClass("datepicker"); $('input[name="第2希望日"]').attr('readonly',true); // カレンダー入力項目 $('.datepicker').datepicker({ minDate: 0, beforeShowDay: function(day) { var dd = day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate(); var hName = ktHolidayName(dd); // 休日・営業設定 if ( day.getDay() == 1 ) return [false,'','休診日']; if ( day.getDay() == 3 ) return [false,'','休診日']; if ( day.getDay() == 5 ) return [false,'','休診日']; if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','13:00?17:00']; return [true,'','12:00?18:00']; }, // 時間設定 onSelect: function(dateText, obj) { var date1 = $(this).datepicker( 'getDate' ) || new Date(); var the_day = date1.getDay(); var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate(); var hName = ktHolidayName(dd); if(the_day == 0 || hName != ""){ dateText+='<option value="">時間帯を選択</option><!-- 以下省略 -->'; }else{ dateText+='<option value="">時間帯を選択</option><!-- 以下省略 -->'; }if($(this).attr('name') == '第1希望日'){ $('select[name="第1希望時"] option').remove(); $('select[name="第1希望時"]').append(dateText); }if($(this).attr('name') == '第2希望日'){ $('select[name="第2希望時"] option').remove(); $('select[name="第2希望時"]').append(dateText); } } }); }; }); });
・祝日設定に外部から読み込んでいますが、祝日通りに、時間表示できません。
・店舗選択はできていますが、店舗ごとの時間が表示されず、難航中です。
ご教授お願いします。
「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
すみません。エラーの件、表記しておきました。ご教授お願いします。
とりあえず、else(vs == null){ は文法エラーかと思います。開発者ツールを開きエラーメッセージを確認するようにしてみてください。
当方の環境で試してみましたが、問題なく動作しました。ここに書かれていないコードに問題が存在するか、または環境依存の問題であるかもしれません。
あなたの回答
tips
プレビュー
