jQuery UI のお問い合わせフォーム欄に「カレンダー」を実装していますが…
実行したい内容
・店(店舗A)を選択後、カレンダー通りに、選べるようにしたい。
・店ごとの休日が異なるため、カレンダー別に設定したい。
ご教授お願いします。
HTML(静的)
<form method="POST"> <p>※お手数ですが、必須項目をすべてご入力の上、確認画面へお進みください。</p> <table class="mailform"> <tr> <th>ご希望店舗</th> <td> <input type="hidden" name="ご希望店舗名" value="" /> <ul class="list"> <li><label><input type="radio" name="ご希望店舗名" value="店舗A" id="shop_a" /> 店舗A</label></li> <li><label><input type="radio" name="ご希望店舗名" value="店舗B" id="shop_b" /> 店舗B</label></li> <li><label><input type="radio" name="ご希望店舗名" value="店舗C" id="shop_c" /> 店舗C</label></li> </ul> </td> </tr> <tr> <th>お名前</th> <td><input id="user_name" type="text" name="お名前" size="40" />例:山田花子</td> </tr> <tr> <th>ふりがな</th> <td><input id="user_name_kana" type="text" name="ふりがな" size="40" />例:やまだはなこ</td> </tr> <tr> <th>お電話番号</th> <td><input type="text" name="お電話番号" size="26" />例:090-0000-0000</td> </tr> <tr> <th>メールアドレス</th> <td><input type="email" name="email" size="40" />例:info@google.com</td> </tr> <tr> <th>ご希望の連絡先</th> <td> <label><input type="radio" name="希望連絡先" value="お電話" /> お電話</label> <label><input type="radio" name="希望連絡先" value="メール" /> メール</label> </td> </tr> <tr> <th>第1希望日時</th> <td class="day"> <input type="hidden" name="お客さまの第1希望日時" value="" /> <input type="text" name="第1希望日" size="26" id="datepicker" placeholder="カレンダーから選択" /> <select name="第1希望時"> <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> </select> </td> </tr> <tr> <th>無料カウンセリング<br />第2希望日時</th> <td class="day"> <input type="hidden" name="お客さまの第2希望日時" value="" /> <input type="text" name="第2希望日" size="26" id="datepicker02" placeholder="カレンダーから選択" /> <select name="第2希望時"> <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> </select> </td> </tr> <tr> <th>質問などありましたら、ご入力ください。</th> <td><textarea name="質問などありましたら、ご入力ください。" rows="20" cols="60" class="mfp"></textarea></td> </tr> </table> <button type="submit">確認画面へ ></button> </form>
Script
jQuery(document).ready(function($){ $( 'input[name="ご希望店舗名"]:radio' ).change( function() { // Shop A if($( this ).attr('id') == 'shop_a'){ // お盆や年末年始の休日を指定 var holidays = ['2017-08-13','2017-08-14','2017-08-15','2017-08-16','2017-08-17','2017-08-18','2017-08-19']; $("#datepicker,#datepicker02").datepicker({ // Option minDate: 0, showButtonPanel: true, beforeShowDay: function(date) { // 休日の判定 for (var i = 0; i < holidays.length; i++) { var htime = Date.parse(holidays[i]); var holiday = new Date(); holiday.setTime(htime); // 祝日 if (holiday.getYear() == date.getYear() && holiday.getMonth() == date.getMonth() && holiday.getDate() == date.getDate()) { return [false, 'holiday']; } } //定休日はreturnをfalseに変更 // 日 if (date.getDay() == 0) { return [false, 'sunday']; } // 月 if (date.getDay() == 1) { return [true, '']; } // 火 if (date.getDay() == 2) { return [true, '']; } // 水 if (date.getDay() == 3) { return [true, '']; } // 木 if (date.getDay() == 4) { return [true, '']; } // 金 if (date.getDay() == 5) { return [true, '']; } // 土 if (date.getDay() == 6) { return [true, 'saturday']; } // 平日 return [true, '']; }, onSelect: function(dateText, inst) { $("#date_val").val(dateText); }, onClose: function(dateText, inst) { $("#datepicker,#datepicker02").blur(); } }); // Shop B }else if($(this).is('#shop_b')){ // お盆や年末年始の休日を指定 var holidays = ['2017-09-13','2017-09-14','2017-09-15','2017-09-16','2017-09-17','2017-09-18','2017-09-19']; $("#datepicker,#datepicker02").datepicker({ // Option minDate: 0, showButtonPanel: true, beforeShowDay: function(date) { // 休日の判定 for (var i = 0; i < holidays.length; i++) { var htime = Date.parse(holidays[i]); var holiday = new Date(); holiday.setTime(htime); // 祝日 if (holiday.getYear() == date.getYear() && holiday.getMonth() == date.getMonth() && holiday.getDate() == date.getDate()) { return [false, 'holiday']; } } //定休日はreturnをfalseに変更 // 日 if (date.getDay() == 0) { return [false, 'sunday']; } // 月 if (date.getDay() == 1) { return [true, '']; } // 火 if (date.getDay() == 2) { return [true, '']; } // 水 if (date.getDay() == 3) { return [false, '']; } // 木 if (date.getDay() == 4) { return [true, '']; } // 金 if (date.getDay() == 5) { return [true, '']; } // 土 if (date.getDay() == 6) { return [false, 'saturday']; } // 平日 return [true, '']; }, onSelect: function(dateText, inst) { $("#date_val").val(dateText); }, onClose: function(dateText, inst) { $("#datepicker,#datepicker02").blur(); } }); // Shop C }else($(this).is('#shop_c')){ // お盆や年末年始の休日を指定 var holidays = ['2017-10-13','2017-10-14','2017-10-15','2017-10-16','2017-10-17','2017-10-18','2017-10-19']; $("#datepicker,#datepicker02").datepicker({ // Option minDate: 0, showButtonPanel: true, beforeShowDay: function(date) { // 休日の判定 for (var i = 0; i < holidays.length; i++) { var htime = Date.parse(holidays[i]); var holiday = new Date(); holiday.setTime(htime); // 祝日 if (holiday.getYear() == date.getYear() && holiday.getMonth() == date.getMonth() && holiday.getDate() == date.getDate()) { return [false, 'holiday']; } } //定休日はreturnをfalseに変更 // 日 if (date.getDay() == 0) { return [true, 'sunday']; } // 月 if (date.getDay() == 1) { return [false, '']; } // 火 if (date.getDay() == 2) { return [true, '']; } // 水 if (date.getDay() == 3) { return [false, '']; } // 木 if (date.getDay() == 4) { return [true, '']; } // 金 if (date.getDay() == 5) { return [false, '']; } // 土 if (date.getDay() == 6) { return [true, 'saturday']; } // 平日 return [true, '']; }, onSelect: function(dateText, inst) { $("#date_val").val(dateText); }, onClose: function(dateText, inst) { $("#datepicker,#datepicker02").blur(); } }); } }); });
長すぎたかもしれませんが、お力をお貸しください。
お願いします。
回答1件
あなたの回答
tips
プレビュー