# Como corrigir o erro do campo Date/Time no WPForms

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.

Erros relacionados

- [Como corrigir o erro do campo de assinatura no WPForms](https://full.services/wp-fixer/corrigir-signature-field-wpforms/)
- [Como corrigir a lógica condicional que não funciona no WPForms](https://full.services/wp-fixer/corrigir-logica-condicional-wpforms/)
- [Como corrigir o formulário multi-página que não avanca no WPForms](https://full.services/wp-fixer/corrigir-multi-page-form-wpforms/)

## 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
```


## Código

```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.

**Fonte:** [WPForms Docs — How to Customize the Date/Time Field](https://wpforms.com/docs/how-to-customize-the-date-time-field/)