联系表格7 Datepicker：在指定时间后自动切换日期

Question

我使用Contact Form 7作为餐馆的预订工具。默认情况下，您可以在第二天设置可以预订表格的日期。也无法预订当天。

我希望该工具显示当前日期，直到下午2点和下午2点后，它会自动切换到第二天的日期。它也使得当天下午2点后的预订无法实现。

我是一个完整的编码新手，我希望你们能帮助我。

这是联系表当前的设置方式：

  <label> Personenanzahl *
    [select* res-number "1 Person" "2 Personen" "3 Personen" "4 Personen" "5 Personen" "6 Personen"] </label>

<label> Datum *
    [date* res-date id:datepicker min:today] </label>

<div class="vc_col-sm-6 padding-column"><label> Start *
    [select* res-start id:start-time "17:00" "17:15" "17:30" "17:45" "18:00" "18:15" "18:30" "18:45" 
    "19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30" "20:45" "21:00" "21:15" "21:30" "21:45" 
    "22:00" "22:15" "22:30" "22:45" "23:00" "23:15" "23:30" "23:45" "00:00" "00:15" "00:30" "00:45" 
    "01:00"] </label></div>

<div class="vc_col-sm-6 padding-column"><label> Ende *
    [select* res-end id:end-time "17:00" "17:15" "17:30" "17:45" "18:00" "18:15" "18:30" "18:45" 
    "19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30" "20:45" "21:00" "21:15" "21:30" "21:45" 
    "22:00" "22:15" "22:30" "22:45" "23:00" "23:15" "23:30" "23:45" "00:00" "00:15" "00:30" "00:45" 
    "01:00"] </label></div>

<label> Name *
    [text* res-name] </label>

<label> Telefon *
    [tel* res-tel] </label>

<label> E-Mail Adresse *
    [email* res-email] </label>

[submit "Senden"]

这是在网站上实现的附加代码：

<script type="text/javascript">
// initialize datepicker
var datepicker = jQuery('#datepicker');
var today = new Date();
var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var dd = today.getDate();
var mm = today.getMonth()+1; // January is 0!
var yyyy = today.getFullYear();
var tomday = tomorrow.getDate();
var tommonth = tomorrow.getMonth() + 1;
var tomyear = tomorrow.getFullYear();
if(tomday<10){tomday='0'+tomday} if(tommonth<10){tommonth='0'+tommonth} tomorrow = tomyear+'-'+tommonth+'-'+tomday;
jQuery(datepicker).attr('value', tomorrow);

// initialize time boxes
var startTimeBox = jQuery('#start-time')[0];
var endTimeBox = jQuery('#end-time')[0];
jQuery(startTimeBox).val("17:00");
jQuery(endTimeBox).val("18:45");

// handling of time changes
jQuery(startTimeBox).change(function (event) {
    var startTimeValue = event.currentTarget.value;
    var startHour = Number(startTimeValue.slice(0,2));
    var startMinute = Number(startTimeValue.slice(3,5));
    var endHour = 0;
    var endMinute = 0;

    if ((startHour == 23) || (startHour == 0) || (startHour == 1)) {
        if ((startHour == 23) && (startMinute == 0)) {
            endHour = 0;
            endMinute = 45;
        } else {
            endHour = 1;
            endMinute == 0;
        }
    } else {
        if (startMinute == 0) {
            endHour = startHour + 1;
            endMinute = 45;
        } else if (startMinute == 15) {
            endHour = startHour + 2;
            endMinute = 0;
        } else if (startMinute == 30) {
            endHour = startHour + 2;
            endMinute = 15;
        } else if (startMinute == 45) {
            endHour = startHour + 2;
            endMinute = 30;
        }
        if (endHour == 24) {
            endHour = 0;
        }
    }

    if (endHour == 24) {
        endHour = 0;
    }

    var endHourString = endHour.toString();
    var endMinuteString = endMinute.toString();

    if (endHourString.length == 1) {
        endHourString = "0" + endHourString;
    }
    if (endMinuteString.length == 1) {
        endMinuteString = "0" + endMinuteString;
    }

    var endTimeString = endHourString + ":" + endMinuteString;

    jQuery(endTimeBox).val(endTimeString);
});
</script>

非常感谢你！

Answer 1

您可以使用联系表格7 datepicker插件，它非常简单，对于时间和日期非常有用