Data Hora

O campo Data Hora adiciona um selecionador de calendário a um widget personalizado que você cria com os Complementos Mestres Construtor de widgets. Editores clicam no campo em Elementor, escolher um dia e, se você permitir, um tempo O widget recebe a escolha como um valor de texto simples, tais como 2026-10-24 19:30, que você pode imprimir no HTML ou passar para um script de contagem regressiva.

Data Hora é um campo Pro. O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.

O que o campo Data Hora faz #

• Adiciona uma entrada de data ao painel do seu widget no Elementor Clicando nele abre um calendário.
• Com Habilitar Tempo em, o calendário recebe uma hora e minuto linha embaixo O relógio é sempre 24 horas.
• Salva o valor escolhido como texto: Y-m-d H:i (por exemplo 2026-10-24 19:30) com o tempo, ou Y-m-d (2026-10-24) sem ele.
• Imprime esse valor onde quer que você coloque seu token, como {{ event_date }}, no painel HTML, CSS ou JS.

Novo para o construtor? Leia o Visão geral do Widget Builder primeiro, depois volte com um widget aberto.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Master Addons para Elementor e Master Addons Pro, ambos ativos. O guia instalação coberturas configuração.
• Um widget aberto no Widget Builder O exemplo neste guia é um widget “Event Countdown”: um campo Texto nomeado event_title, um campo Data Hora nomeado event_date, e um pequeno roteiro que faz a contagem regressiva até aquela data.

Como adicionar um campo Data Hora #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. No Conteúdo tab, adicione uma seção se ainda não houver, por exemplo “Event”.
3. Tipo date na caixa de pesquisa de campo à esquerda.
4. Arrastar Data Hora na secção Clique no lápis no campo para abrir as suas definições.

Data Hora opções de campo explicadas #

• Etiqueta: o texto ao lado da entrada em Elementor, por exemplo “Event Date”.
• Nome: o ID exclusivo do campo e o nome do seu token Utilize apenas letras, números e sublinhados, por exemplo event_date.
• Descrição: uma dica mostrada na entrada do Elementor, como “Pick the date and time the countdown ends.”
• Habilitar tempo: adiciona a linha de horas e minutos ao calendário e muda o formato salvo de Y-m-d para Y-m-d H:i.
• Aumento de minutos: a que distância os minutos se movem a cada clique das setas O padrão é 1. com 15, as setas passam por: 00, :15, :30 e:45.
• Valor padrão: a data em que uma nova cópia do widget começa.

A caixa Valor padrão abre o mesmo calendário, então você escolhe a data de início em vez de digitá-la A linha do tempo também aparece aqui quando Habilitar tempo está ativado.

Para uma contagem regressiva, escolha uma data padrão no futuro Um novo widget então faz a contagem regressiva imediatamente em vez de mostrar zeros.

Configurações comuns #

• Mostrar etiqueta esconde ou mostra a etiqueta no painel.
• Bloco Etiqueta coloca o rótulo em sua própria linha acima da entrada Ligue-o se o seu rótulo for longo.
• Condições mostra o campo apenas quando outro controlo tem um determinado valor, por exemplo um switcher “Show countdown” Veja Condições.
• Separador desenha uma linha divisória antes ou depois do controle.

Controle Responsivo, Suporte Dinâmico, Frontend Disponível, Classes de Controle e Seletor aparecem em todos os campos Você não precisa de nenhum deles para a configuração neste guia, e o Seletor pode ficar vazio porque um selecionador de data não escreve CSS.

O selecionador não tem opções para um relógio somente de hora ou para bloquear datas passadas Os editores podem escolher qualquer dia.

Use a data no seu modelo #

Imprima o token onde quer que a data deva aparecer No widget Contagem regressiva de eventos, o HTML coloca a data em uma linha de texto e em um data-deadline atributo que o script lê:

<div class="event-card">
  <p class="event-title">{{ event_title }}</p>
  {% if event_date %}
  <p class="event-when">Starts {{ event_date }}</p>
  <div class="event-countdown" data-deadline="{{ event_date }}">
    <span class="days">0</span>d <span class="hours">0</span>h <span class="mins">0</span>m
  </div>
  {% endif %}
</div>

O {% if event_date %} verificar assuntos Se um editor limpar a entrada, o token não imprime nada O Valor Padrão não é usado novamente e, sem a verificação, a contagem regressiva seria mostrada NaN.

Construa uma contagem regressiva no painel JS #

O painel JS executa este script Ele encontra cada contagem regressiva, transforma o texto salvo em uma data e atualiza os números a cada 30 segundos:

document.querySelectorAll(".event-countdown").forEach(function (el) {
  var deadline = new Date(el.dataset.deadline.replace(" ", "T"));
  if (isNaN(deadline)) return;
  function tick() {
    var diff = Math.max(0, deadline - new Date());
    el.querySelector(".days").textContent = Math.floor(diff / 86400000);
    el.querySelector(".hours").textContent = Math.floor(diff / 3600000) % 24;
    el.querySelector(".mins").textContent = Math.floor(diff / 60000) % 60;
  }
  tick();
  setInterval(tick, 30000);
});

• replace(" ", "T") vira 2026-10-24 19:30 em 2026-10-24T19:30, um formato que todo navegador lê da mesma maneira.
• isNaN(deadline) interrompe o script quando a data está vazia ou não pode ser lida.
• Ler o valor de um atributo de dados mantém cada widget na página em contagem regressiva para sua própria data.

Os tokens também funcionam diretamente no painel JS. Em nossos testes, var deadline = "{{ event_date }}"; imprimiu a data guardada Mantenha as aspas, porque uma data nua não é válida JavaScript.

O valor salvo não tem fuso horário O navegador lê como a hora local do visitante, então uma contagem regressiva para 19:30 termina às 19:30 em Londres e novamente às 19:30 em Nova York Por um momento mundial, adicione um deslocamento à string antes de analisar, por exemplo 2026-10-24T19:30:00+00:00.

Use o controle Data Hora no Elementor #

Adicione o widget a uma página ou recarregue o editor se a página já estiver aberta. O campo fica no Conteúdo guia sob sua etiqueta Clique na entrada para abrir o calendário, escolha um dia e defina a hora e os minutos na linha abaixo A visualização é atualizada assim que você escolher.

O nome do mês tem uma queda e o ano é uma caixa de número, então avançar meses não leva muitos cliques.

Casos de uso comum #

• Contagens regressivas para lançamentos, vendas e webinars.
• Cartões de eventos que mostram a data ao lado do título e do local.
• Ofereça banners que um script oculta depois que o prazo terminar.
• Horários de abertura ou fechamento impressos em um widget de programação.

Dicas para trabalhar com o campo Data Hora #

• Decida ativar o tempo antes que os editores usem o widget. O formato só muda para as datas escolhidas depois de trocá-lo. Um valor salvo como 2026-10-24 19:30 mantém seu tempo mesmo depois de desativar o Enable Time.
• Sempre manuseie um valor vazio. Embrulhe a marcação {% if %} e verifique se há uma data inválida no script.
• Planeje datas no passado. O exemplo pára em zero Você também poderia ocultar o widget ou mostrar um “Este evento terminou a mensagem”.
• Use um incremento de minutos de 5, 15 ou 30 para eventos que começam na hora ou meia hora.
• Escreva uma descrição clara. Diga se a data é o início, o fim ou o prazo, para que os editores escolham o caminho certo.

Perguntas frequentes #

Embrulhando #

Adicione o campo Data Hora a uma seção Conteúdo, escolha se precisa de uma hora e imprima {{ event_date }} no seu HTML ou lê-lo no painel JS. Verifique se há valores vazios e o widget se mantém quando um editor limpa a data Emparelhe-o com o Campo alternador para deixar os editores esconderem a contagem regressiva, e vejam preços para o que cada plano inclui.