Definir Limites de Tempo Condicionais para Datas Específicas num Campo de Data/Hora

Gostaria de limitar as opções de hora disponíveis no seu campo Data/Hora para datas específicas? Por defeito, o campo Data/Hora no WPForms permite definir intervalos de tempo gerais através das definições do construtor de formulários. No entanto, se precisar de impor limites de tempo especiais para uma data em particular (por exemplo, horas de levantamento mais curtas num feriado), pode fazê-lo facilmente com um pequeno trecho de JavaScript.

Neste tutorial, vamos guiá-lo através dos passos 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, terá de criar o seu formulário e adicionar o campo Data/Hora.
Se pretender que os utilizadores selecionem data e hora separadamente, certifique-se de que o tipo de campo está definido como Data / Hora em Formato.

Por exemplo:

  • Hora geral de levantamento: 11:00 às 17:00
  • Dia especial (4 de outubro de 2025): 11:00 às 14:00

Adicionar Limites de Tempo Condicionais

Agora é hora de adicionar o trecho ao seu site.
Se não tiver a certeza onde ou como adicionar trechos de código, consulte o 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 em conformidade.
No exemplo acima:

  • Todos os dias permitem a seleção de horário das 11:00 às 17:00.
  • No dia 4 de outubro de 2025, o intervalo é reduzido das 11:00 às 14:00.

Certifique-se de substituir:

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

Se não tiver a certeza de como encontrar estes, consulte o nosso guia sobre como localizar o ID do formulário e o ID do campo.

E é tudo! Definiu com sucesso limites de tempo condicionais para uma data específica no seu campo Data/Hora do WPForms.

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