こんにちは。
現在レストランのサイトを制作しています。コンタクトフォームでユーザーが予約したい日付と時間帯を選択できるように"jquery UIのdatetimepicker"を使用しています。
***実現したいこと***
選択された曜日によって表示する時間を変更したいです。
コードにも書いてありますが、
例)月、水、木、金曜日を選択 => 予約可能な時間は、'17:30', "17:45", '20:15', "20:30", "20:45" を表示
土、日曜日を選択 => 予約可能な時間は、'11:30', '11:45', '12:00', '12:15', '17:30', "17:45", '20:15', "20:30", "20:45" を表示
/* main.js */ let changeTimeRange = function (currentDateTime) { if (currentDateTime.getDay() == 6 && currentDateTime.getDay() == 0) { // 土、日曜日が選択されたら予約可能な時間はallowTimesの範囲を表示 alert('weekends') // 表示されない this.setOptions({ allowTimes: [ '11:30', '11:45', '12:00', '12:15', '17:30', "17:45", '20:15', "20:30", "20:45" ], }); // 月、水、木、金曜日が選択されたら予約可能な時間はallowTimesの範囲を表示 } else if (currentDateTime.getDay() == 1 && currentDateTime.getDay() == 3 && currentDateTime.getDay() == 4 && currentDateTime.getDay() == 5) this.setOptions({ allowTimes: [ '17:30', "17:45", '20:15', "20:30", "20:45" ], }); }; jQuery.datetimepicker.setLocale('de'); $('.timepicker').datetimepicker({ minDate: 1, timepicker: true, datepicker: true, // allowTimes: [ // '11:30', '11:45', '12:00', '12:15', '17:30', "17:45", '20:15', "20:30", "20:45" // ], allowTimes: changeTimeRange, format: 'd, F. Y, H:i', onChangeDateTime: changeTimeRange, onShow: changeTimeRange });
参考サイト datetimepickerドキュメント 参考部分は(Set options runtime DateTimePicker #
If select day is Saturday, the minimum set 11:00, otherwise 8:00)
指摘やアドバイス、参考になる記事をご存知の方がいればとても助かります。よろしくお願いします。
追記
急ぎの案件なのでstackoverflowにも同内容を投稿しました。stackoverflow
回答2件
あなたの回答
tips
プレビュー