Definição de limites de tempo condicionais para datas específicas em um campo de data/hora

Você gostaria de limitar as opções de horário disponíveis em seu campo Data/Hora para datas específicas? Por padrão, o campo Data/Hora no WPForms permite que você defina intervalos de tempo gerais usando as configurações do construtor de formulários. No entanto, se precisar impor limites de tempo especiais para uma data específica (por exemplo, horários de coleta mais curtos em um feriado), você pode fazer isso facilmente usando um pequeno trecho de JavaScript.

Neste tutorial, vamos orientá-lo nas etapas para restringir o intervalo de tempo disponível para uma data específica, mantendo os limites gerais de tempo para todas as outras datas.

Criando o formulário

Primeiro, você precisará criar o formulário e adicionar o campo Data/Hora.
Se quiser que os usuários selecionem a data e a hora separadamente, verifique se o tipo de campo está definido como Data/Hora em Formato.

Por exemplo:

• Horário geral de retirada: das 11:00 às 17:00 horas
• Dia especial (4 de outubro de 2025): 11:00 AM a 2:00 PM

Adição de limites de tempo condicionais

Agora é hora de adicionar o snippet ao seu site.
Se não tiver certeza de onde ou como adicionar snippets de código, consulte nosso tutorial sobre como adicionar PHP ou JavaScript personalizados ao 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);

Esse snippet verifica a data selecionada e ajusta os horários disponíveis de acordo.
No exemplo acima:

• Todos os dias permitem a seleção de horário das 11:00 às 17:00 horas.
• Em 4 de outubro de 2025, o intervalo é reduzido para 11:00 AM a 2:00 PM.

Certifique-se de substituir:

• 815 com seu ID de formulário.
• 12 com sua ID do campo Data/Hora

Se não tiver certeza de como encontrá-los, consulte nosso guia sobre como localizar o ID do formulário e o ID do campo.

E é isso! Você definiu com êxito os limites de tempo condicionais para uma data específica em seu campo Data/Hora do WPForms.

Você também gostaria de bloquear totalmente determinados intervalos de datas? Confira nosso tutorial sobre como personalizar as opções de data do campo Date/Time.