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

Möchten Sie die verfügbaren Zeitoptionen in Ihrem Datum/Uhrzeit-Feld für bestimmte Daten einschränken? Standardmäßig erlaubt Ihnen das Datum/Zeit-Feld in WPForms, allgemeine Zeitspannen mit den Einstellungen des Formularerstellers festzulegen. Wenn Sie jedoch spezielle Zeitlimits für ein bestimmtes Datum erzwingen müssen (z. B. kürzere Abholzeiten an einem Feiertag), können Sie das mit einem kleinen JavaScript-Snippet leicht tun.

In diesem Tutorial zeigen wir Ihnen, wie Sie den verfügbaren Zeitbereich für ein bestimmtes Datum einschränken und gleichzeitig allgemeine Zeitgrenzen für alle anderen Daten beibehalten können.

Erstellen des Formulars

Zunächst müssen Sie Ihr Formular erstellen und das Feld Datum/Uhrzeit hinzufügen.
Wenn Sie möchten, dass die Benutzer sowohl Datum als auch Uhrzeit getrennt auswählen können, stellen Sie sicher, dass der Feldtyp unter Format auf Datum/Uhrzeit eingestellt ist.

Zum Beispiel:

• Allgemeine Abholzeit: 11:00 AM bis 5:00 PM
• Sondertag (4. Oktober 2025): 11:00 Uhr bis 14:00 Uhr

Hinzufügen von bedingten Zeitlimits

Jetzt 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 unsere Anleitung 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 überprüft das ausgewählte Datum und passt die verfügbaren Zeiten entsprechend an.
Im obigen Beispiel:

• Jeden Tag ist eine Zeitauswahl von 11:00 bis 17:00 Uhr möglich.
• Am 4. Oktober 2025 wird die Reichweite auf 11:00 bis 14:00 Uhr reduziert.

Stellen Sie sicher, dass Sie sie ersetzen:

• 815 mit Ihrer Formular-ID.
• 12 mit Ihrer Datum/Zeit-Feld-ID

Wenn Sie nicht sicher sind, wie Sie diese finden können, lesen Sie unseren Leitfaden zum Auffinden der Formular-ID und der Feld-ID.

Und das war's! Sie haben erfolgreich bedingte Zeitlimits für ein bestimmtes Datum in Ihrem WPForms Datum/Zeit-Feld festgelegt.

Möchten Sie auch bestimmte Datumsbereiche ganz sperren? In unserem Tutorial erfahren Sie, wie Sie die Datumsoptionen im Feld Datum/Uhrzeit anpassen können.