🎉 USE O CUPOM DESCONTO.FULL | 20% OFF acima de R$ 50,00

Como corrigir o erro do campo Date/Time no WPForms

Time Full Services Time Full Services
Tipo Outros erros
Nome do erro Campo de data/hora do WPForms nao funciona EN: WPForms Date / Time field not working
Severidade Atenção
Descrição O WPForms Date Time field para de funcionar quando o calendário Date Picker (Flatpickr) não carrega por conflito de JavaScript, quando o formato de exibicao difere do formato que o site espera, ou quando opções como Disable Past Dates e Limit Hours bloqueiam mais do que deveriam.

O que é WPForms Date Time field?

O WPForms Date Time field, exibido no formulário como Date / Time, permite que o visitante informe uma data, uma hora ou ambas. Pelas Opções do Campo você escolhe o que exibir no Format (Date and Time, Date ou Time) e o modo de selecao da data no Type: o Date Picker abre um calendário popup gerado pela biblioteca Flatpickr, e o Date Dropdown mostra três listas separadas para mes, dia e ano. A parte de hora usa o Interval (15, 30 ou 60 minutos) e o Time Format (12h ou 24h).

O erro do WPForms Date Time field aparece quando essa selecao deixa de funcionar: o calendário do Date Picker não abre ao clicar, o campo fica em branco, a lista de horas some ou a data enviada chega em um formato diferente do esperado. Como o Date Picker depende do JavaScript do Flatpickr carregado na página, a causa raiz mais comum e um conflito de scripts ou de cache que impede esse calendário de inicializar; configurações restritivas de data e hora completam o quadro.

Como identificar

  • Ao clicar no campo de data nada acontece: o calendário popup do Date Picker não abre e o usuário não consegue selecionar a data.
  • O console do navegador exibe erros de JavaScript como ‘Uncaught TypeError’ ou ‘flatpickr is not a function’ ao carregar a página do formulário.
  • Todas ou quase todas as datas aparecem cinzas e não clicaveis no calendário, mesmo datas validas, por causa das opções de limite.
  • A lista de horarios não aparece ou vem vazia quando o Format esta configurado como Time ou Date and Time.
  • A data enviada chega na entrada (Entries) ou no email em um formato diferente do escolhido nas Opções do Campo, como M/D/Y no lugar de D/M/Y.
  • O campo de data fica completamente em branco em páginas servidas por cache, enquanto funciona normalmente com o usuário logado.
Antes de começar: Antes de desativar plugins, trocar o tema ou alterar regras de cache em producao, faça um backup do site ou teste primeiro em um ambiente de staging, para poder reverter caso o formulário pare de carregar durante o diagnostico.

Como prevenir

  • Mantenha o WPForms, o tema e os demais plugins sempre na versão estavel mais recente para reduzir conflitos de JavaScript que afetam o Flatpickr.
  • Ao configurar cache ou minificacao, mantenha os scripts do WPForms na lista de excecao para o calendário do Date Picker carregar também para visitantes deslogados.
  • Use as opções Disable Past Dates, Limit Days e Limit Hours com cautela e sempre teste o formulário deslogado depois de ativa-las.
  • Padronize um único Date Format em todos os formulários do site para evitar confusao entre dia e mes nas entradas e nos emails.

Causa

  • Um conflito de JavaScript com outro plugin ou com o tema impede a biblioteca Flatpickr de inicializar, entao o calendário do Date Picker não abre ao clicar no campo.
  • Um plugin de cache ou de minificacao agrupou ou adiou o script do Flatpickr, fazendo o campo Date/Time carregar sem o calendário na página servida em cache para o visitante deslogado.
  • A opção Disable Past Dates esta ativa e, somada a um fuso horario do WordPress diferente do esperado, deixa o dia atual cinza e não clicavel no calendário.
  • A opção Limit Days desmarcou os dias da semana validos, ou Limit Hours definiu Start Time e End Time fora do horario que o usuário tenta escolher, bloqueando a selecao.
  • O Format do campo esta como Date Dropdown em vez de Date Picker (ou o inverso), entao o calendário que o usuário espera simplesmente não existe naquela configuração.
  • O Date Format escolhido nas Opções do Campo (por exemplo M/D/Y) difere do formato que a equipe le na entrada ou no email, dando a impressao de data errada quando na verdade so muda a ordem de dia e mes.

Como resolver

  1. Confirme o Format e o Type do campo Date/Time: Abra o formulário no construtor do WPForms e clique no campo Date / Time. Em Opções do Campo, confira se o Format esta como Date and Time, Date ou Time conforme o esperado, e se o Type da data esta em Date Picker quando você quer o calendário popup ou em Date Dropdown quando quer as três listas de mes, dia e ano.
    Painel WP -> WPForms -> Todos os Formulários -> abra o formulário
    Clique no campo Date / Time -> aba Opções do Campo
    Ajuste o Format e, em Type, escolha Date Picker para o calendário popup
  2. Revise as opções de limite de data e hora: Ainda nas Opções do Campo, verifique Disable Past Dates, Limit Days e Limit Hours. Se as datas estão todas cinzas, desligue temporariamente o Disable Past Dates para testar. Em Limit Days, garanta que os dias da semana validos continuam marcados, e em Limit Hours confirme que Start Time e End Time abrangem o horario que o usuário precisa escolher.
    Opções do Campo -> Avancado -> desligue Disable Past Dates para teste
    Confira Limit Days e mantenha marcados os dias da semana validos
    Em Limit Hours, ajuste Start Time e End Time para a janela correta
  3. Isole o conflito de JavaScript do Flatpickr: Se o calendário do Date Picker não abre, abra o console do navegador e recarregue a página do formulário para ver erros de script. Desative os outros plugins um a um e troque para um tema padrão, recarregando o formulário a cada teste, até o calendário voltar a abrir. Isso identifica o plugin ou tema que interrompe o Flatpickr.
    Abra o formulário no site e pressione F12 -> aba Console
    Painel WP -> Plugins -> desative os demais plugins um a um
    Painel WP -> Aparencia -> Temas -> ative um tema padrão para testar
  4. Exclua o script do WPForms do cache e da minificacao: Se o campo fica em branco apenas para o visitante deslogado, o cache ou a minificacao quebrou o Flatpickr. No seu plugin de cache, exclua os scripts do WPForms do agrupamento e do adiamento de JavaScript, limpe o cache e teste em uma aba anonima.
    No plugin de cache, adicione os scripts do WPForms a excecao de minificacao/defer
    Limpe todo o cache do site após salvar
    Teste o formulário em uma janela anonima (deslogado)
  5. Padronize o formato de data e teste o envio: Defina o Date Format desejado (por exemplo D/M/Y) nas Opções do Campo para que a data exibida e enviada siga o padrão brasileiro. Em seguida, faça um envio de teste e confira a data e a hora na tela Entries e no email de notificação para validar a correção ponta a ponta.
    Opções do Campo -> Date Format -> selecione D/M/Y
    Salve o formulário e faça um envio de teste
    Painel WP -> WPForms -> Entries -> confira a data e a hora gravadas
PHP
<?php
// Forca o calendario do campo Date/Time do WPForms a usar locale pt e formato D/M/Y.
add_action( 'wpforms_frontend_confirmation_message', '__return_false', 0 );
add_filter( 'wpforms_datetime_date_format', 'full_wpforms_date_format', 10, 1 );
function full_wpforms_date_format( $format ) {
    return 'd/m/Y';
}

// Carrega o locale pt-BR do Flatpickr no rodape, apos o script do WPForms.
add_action( 'wp_footer', 'full_wpforms_flatpickr_locale', 30 );
function full_wpforms_flatpickr_locale() {
    if ( ! wp_script_is( 'wpforms-flatpickr', 'enqueued' ) ) {
        return;
    }
    ?>
    <script>
    document.addEventListener( 'DOMContentLoaded', function () {
        if ( window.flatpickr && flatpickr.l10ns ) {
            flatpickr.localize( flatpickr.l10ns.pt );
        }
    } );
    </script>
    <?php
}

Perguntas frequentes

Por que o calendário do campo de data do WPForms não abre
Na maioria dos casos um conflito de JavaScript com outro plugin ou com o tema impede a biblioteca Flatpickr de inicializar, entao o Date Picker não abre. Desative os outros plugins um a um e troque para um tema padrão, recarregando o formulário a cada teste para achar o culpado.
Por que todas as datas aparecem cinzas e não clicaveis
Datas cinzas indicam que uma opção de limite esta ativa. Verifique Disable Past Dates, Limit Days e Limit Hours nas Opções do Campo. Quando uma data e desabilitada, ela fica cinza e não clicavel no site, entao ajuste essas opções para liberar os dias validos.
Qual a diferenca entre Date Picker e Date Dropdown no WPForms
O Date Picker abre um calendário popup do qual o usuário seleciona a data, enquanto o Date Dropdown mostra três listas separadas para mes, dia e ano. Se você espera o calendário e ele não aparece, confirme que o Type do campo esta como Date Picker.
Por que a data salva no WPForms vem em formato diferente do escolhido
O WPForms oferece formatos como M/D/Y, D/M/Y e Y/M/D nas Opções do Campo. Se a data parece trocada, o Date Format selecionado provavelmente difere do que você le. Defina D/M/Y para o padrão brasileiro e refaça um envio de teste.
Por que o campo de data fica em branco so para quem não esta logado
Isso costuma indicar que o cache ou a minificacao quebrou o script do Flatpickr na página servida ao visitante. Exclua os scripts do WPForms do agrupamento e do defer no plugin de cache, limpe o cache e teste em uma aba anonima.
Como mudar o intervalo e o formato de hora do campo no WPForms
Nas Opções do Campo, o Interval define os incrementos da lista de horarios em 15, 30 ou 60 minutos, e o Time Format alterna entre 12h e 24h. Ajuste esses dois valores para que a lista de horas exiba os horarios que o usuário precisa.
Como limitar os horarios disponiveis no campo Date/Time
Ative a opção Limit Hours para exibir os campos Start Time e End Time e definir a janela de horarios disponiveis. So mantenha a janela larga o suficiente, pois um intervalo muito estreito esconde os horarios que o usuário tentaria escolher.

Seja PRO.

Tenha acesso a snippets de código premium — PHP, JavaScript, CSS e HTML prontos para usar em seus projetos.

Conhecer o plano Pro →

Uma nova era para o WordPress.

A FULL Services redefine o CMS com uma arquitetura modular que transforma o WordPress em um motor de crescimento digital. 

Painéis personalizados

Um novo nível de controle para o WordPress. Acompanhe métricas, automações e evolução do seu site em um único painel visual.

A força por trás de grandes marcas

Para agências, estúdios e profissionais independentes que desejam oferecer soluções de alto nível com sua própria marca.

Componentes

Hero Sections

30 componentes

Seções de CTA

14 componentes

Login

14 componentes

Blog

14 componentes

Cabeçalhos

24 componentes

Seções de FAQ

53 componentes

Cadastro

53 componentes

Blog individual

53 componentes

Rodapés

28 componentes

Seções de contato

27 componentes

Seções de preços

27 componentes

Faixas

27 componentes

Portfólio

16 componentes

Seções de equipe

12 componentes

Números

12 componentes

Logotipos

12 componentes