Festlegen von bedingten Zeitlimits für bestimmte Daten in einem Datums-/Zeitfeld

Möchten Sie die verfügbaren Zeitoptionen in Ihrem Datums-/Zeitfeld für bestimmte Daten einschränken? Standardmäßig können Sie mit dem Datums-/Zeitfeld in WPForms allgemeine Zeitbereiche über die Einstellungen des Formular-Generators festlegen. Wenn Sie jedoch spezielle Zeitlimits für ein bestimmtes Datum erzwingen müssen (z. B. kürzere Abholzeiten an einem Feiertag), können Sie dies mit einem kleinen JavaScript-Snippet einfach tun.

In diesem Tutorial führen wir Sie durch die Schritte, um den verfügbaren Zeitbereich für ein bestimmtes Datum einzuschränken und gleichzeitig allgemeine Zeitlimits für alle anderen Daten beizubehalten.

Erstellen des Formulars

Zuerst müssen Sie Ihr Formular erstellen und das Feld Datum/Uhrzeit hinzufügen.
Wenn Benutzer Datum und Uhrzeit separat auswählen sollen, stellen Sie sicher, dass der Feldtyp unter Format auf Datum / Uhrzeit eingestellt ist.

Zum Beispiel:

• Allgemeine Abholzeit: 11:00 bis 17:00 Uhr
• Besonderer Tag (4. Oktober 2025): 11:00 bis 14:00 Uhr

Bedingte Zeitlimits hinzufügen

Nun ist es an der Zeit, das Snippet zu Ihrer Website hinzuzufügen.
Wenn Sie nicht sicher sind, wo oder wie Sie Code-Snippets hinzufügen können, lesen Sie bitte unser Tutorial zum Hinzufügen von benutzerdefiniertem PHP oder JavaScript für WPForms.

add_action('wpforms_wp_footer_end',function(){?>
<script type="text/javascript">
jQuery(document).ready(function($){

    var formID=815; // WPForms form ID
    var fieldID=12; // WPForms field ID (Date/Time)

    var dateField=$('#wpforms-'+formID+'-field_'+fieldID);
    var timeField=$('#wpforms-'+formID+'-field_'+fieldID+'-time');
    function updateTimeLimits(){
        var selectedDate=dateField.val();
        if(!selectedDate)return;
        var parts=selectedDate.split('/');
        var day=parseInt(parts[0],10);
        var month=parseInt(parts[1],10);
        var year=parseInt(parts[2],10);
        var minTime='11:00';
        var maxTime='17:00';
        if(month===10&&day===4){maxTime='14:00';}
        var today=new Date();
        var selected=new Date(year,month-1,day);
        if(today.toDateString()===selected.toDateString()){
            var nowH=today.getHours();
            var nowM=today.getMinutes();
            if(nowM>0){nowH++;nowM=0;}
            var currentMin=(nowH<10?'0':'')+nowH+':00';
            if(currentMin>minTime){minTime=currentMin;}
        }
        timeField.timepicker('option',{minTime:minTime,maxTime:maxTime});
    }
    dateField.on('change',updateTimeLimits);
    updateTimeLimits();
});
</script>
<?php},10);

Dieses Snippet prüft das ausgewählte Datum und passt die verfügbaren Zeiten entsprechend an.
Im obigen Beispiel:

• Jeder Tag erlaubt die Zeitauswahl von 11:00 bis 17:00 Uhr.
• Am 4. Oktober 2025 wird der Bereich auf 11:00 bis 14:00 Uhr reduziert.

Stellen Sie sicher, dass Sie ersetzen:

• 815 durch Ihre Formular-ID.
• 12 durch Ihre Datums-/Zeitfeld-ID

Wenn Sie nicht sicher sind, wie Sie diese finden, lesen Sie unsere Anleitung zum Auffinden der Formular-ID und Feld-ID.

Und das ist alles! Sie haben erfolgreich bedingte Zeitlimits für ein bestimmtes Datum in Ihrem WPForms Datums-/Zeitfeld festgelegt.

Möchten Sie auch bestimmte Datumsbereiche vollständig blockieren? Lesen Sie unser Tutorial zum Anpassen der Datumsoptionen des Datums-/Zeitfelds.