Impostazione di limiti di tempo condizionali per date specifiche in un campo Data/Ora

Desideri limitare le opzioni di orario disponibili nel tuo campo Data/Ora per date specifiche? Per impostazione predefinita, il campo Data/Ora in WPForms ti consente di impostare intervalli di tempo generali utilizzando le impostazioni del generatore di moduli. Tuttavia, se hai bisogno di imporre limiti di orario speciali per una data particolare (ad esempio, orari di ritiro più brevi in un giorno festivo), puoi farlo facilmente utilizzando un piccolo snippet JavaScript.

In questo tutorial, ti guideremo attraverso i passaggi per limitare l'intervallo di orario disponibile per una data specifica, mantenendo i limiti di orario generali per tutte le altre date.

Creazione del modulo

Per prima cosa, dovrai creare il tuo modulo e aggiungere il campo Data/Ora.
Se desideri che gli utenti selezionino data e ora separatamente, assicurati che il tipo di campo sia impostato su Data / Ora sotto Formato.

Ad esempio:

• Orario di ritiro generale: dalle 11:00 alle 17:00
• Giorno speciale (4 ottobre 2025): dalle 11:00 alle 14:00

Aggiunta di limiti di orario condizionali

Ora è il momento di aggiungere lo snippet al tuo sito.
Se non sei sicuro di dove o come aggiungere snippet di codice, consulta il nostro tutorial sull'aggiunta di PHP o JavaScript personalizzato per 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);

Questo snippet controlla la data selezionata e regola gli orari disponibili di conseguenza.
Nell'esempio sopra:

• Ogni giorno consente la selezione dell'orario dalle 11:00 alle 17:00.
• Il 4 ottobre 2025, l'intervallo è ridotto dalle 11:00 alle 14:00.

Assicurati di sostituire:

• 815 con l'ID del tuo modulo.
• 12 con l'ID del tuo campo Data/Ora

Se non sei sicuro di come trovarli, consulta la nostra guida su come individuare l'ID del modulo e l'ID del campo.

E il gioco è fatto! Hai impostato con successo limiti di orario condizionali per una data specifica nel tuo campo Data/Ora di WPForms.

Desideri anche bloccare intere determinate date? Dai un'occhiata al nostro tutorial su come personalizzare le opzioni di data del campo Data/Ora.