Definindo Limites de Tempo Condicionais para Datas Específicas em um Campo de Data/Hora

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

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

Criação do Formulário

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

Por exemplo:

• Horário geral de retirada: 11:00 às 17:00
• Dia especial (4 de outubro de 2025): 11:00 às 14:00

Adicionando Limites de Horário Condicionais

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

Este trecho 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.
• Em 4 de outubro de 2025, o intervalo é reduzido para 11:00 às 14:00.

Certifique-se de substituir:

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

Se você não tem certeza de como encontrá-los, confira nosso guia sobre como localizar o ID do formulário e o ID do campo.

E é isso! Você definiu com sucesso limites de horário condicionais para uma data específica no seu campo de Data/Hora do WPForms.

Gostaria também de bloquear certos intervalos de datas inteiramente? Confira nosso tutorial sobre como personalizar as opções de data do campo de Data/Hora.