現在レストランのサイトを制作しています。コンタクトフォームでユーザーが予約したい日付と時間帯を選択できるように"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" を表示
let changeTimeRange = function(currentDateTime) {
// 土、日曜日が選択されたら営業時間はallowTimesの範囲
if (currentDateTime.getDay() == 6 && currentDateTime.getDay() == 0) {
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)
指摘やアドバイス、参考になる記事をご存知の方がいればとても助かります。よろしくお願いします。
急ぎの案件なので teratailにも同内容を投稿しました.
追記(解決しました)
teratailで解決したので、こちらにも解決したコードを載せます。
let changeTimeRange = function(currentDateTime) {
if (currentDateTime.getDay() == 6 || currentDateTime.getDay() == 0) {
this.setOptions({
allowTimes: [
'11:30', '11:45', '12:00', '12:15', '17:30', "17:45", '20:15', "20:30", "20:45"
],
});
} 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,
format: 'd, F. Y, H:i',
onChangeDateTime: changeTimeRange,
onShow: changeTimeRange,
});