联系表7 Datepicker:在一天中的指定时间后自动切换日期

时间:2019-03-15 12:34:26

标签: javascript jquery wordpress contact-form-7

我正在使用联系表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>

非常感谢您!

1 个答案:

答案 0 :(得分:0)

您可以使用contact form7日期选择器插件,它与当前时间和日期一样方便且有用,用于日期和时间