Data Hora

O Campo Data Hora dá a um widget personalizado um seletor de calendário adequado em vez de uma caixa de data de texto livre Os editores clicam no campo em Elementor, um calendário Flatpickr é aberto e eles escolhem uma data (e opcionalmente uma hora) sem nunca se preocupar em digitar o formato que seu widget espera Dentro dos Complementos Mestres Construtor de widgets, essa consistência é o ponto principal: o valor sempre chega em um formato previsível em que seu modelo e script podem confiar.

O campo Data Hora suporta Condições como todo controle, e seu valor é impresso através do Mecanismo de modelo de sintaxe dupla', para que você possa compará-lo ou envolvê-lo {% if %} blocos no seu modelo Ambos os guias cobrem a configuração e as limitações.

O campo se conecta através de um token como todo campo de valor simples Imprimir {{ event_date }} no painel HTML para exibir a data ou entregá-la ao painel JS, onde uma contagem regressiva, uma verificação de horas de abertura ou um script de agendamento podem analisá-la.

O que o campo Data Hora faz #

• Rende um seletor de calendário clique para abrir (Flatpickr) no painel Elementor do widget.
• Opcionalmente inclui um seletor de tempo ao lado do calendário.
• Armazena a escolha como uma string formatada, normalizada para Y-m-d H:i com o tempo habilitado ou Y-m-d sem ele.
• Imprime essa string em qualquer lugar do painel HTML, CSS ou JS {{ your_field_name }}.
• Alimenta JavaScript diretamente, a rota usual para widgets de contagem regressiva e agendamento.

Se os widgets personalizados forem um novo território, o Visão geral do Widget Builder é o melhor ponto de partida; esta página pressupõe que você conhece o editor.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget de contagem regressiva de eventos com um campo Data Time nomeado event_date que o script do widget faz a contagem regressiva para.

Como adicionar um campo Data Hora #

Arraste o Data Hora campo do painel de campos em uma seção abaixo do Conteúdo guia. Suas opções abrem à esquerda assim que ele pousar.

Data Hora opções de campo explicadas #

• Etiqueta: o texto mostrado ao lado do selecionador em Elementor, por exemplo “Event Date”.
• Nome: o identificador exclusivo a que seus modelos se referem. Apenas letras, números e sublinhados, por exemplo event_date.
• Predefinição: a data de início é acompanhada pelo widget.
• Habilitar tempo: adiciona um seletor de hora e minuto ao calendário Com ele ligado, os valores saem como Y-m-d H:i (como 2026-12-31 18:00); desligado, como uma planície Y-m-d data.
• Aumento de minutos: a etapa em que o seletor de minutos se move, para que os editores possam ser limitados a intervalos de 5, 15 ou 30 minutos.
• Descrição, Mostrar etiqueta, Separador: as opções de exibição padrão, além de Condições para mostrar o campo somente quando outro controle tiver um determinado valor.

Sob o capô, o selecionador aceita um picker_options objeto com outras configurações do Flatpickr, inclusive noCalendar para um selecionador apenas no tempo, dateFormat, time_24hr, e minDate/maxDate limites. A UI do construtor mantém as comuns, Habilitar incremento de tempo e minuto, frontal e central, e o tempo de execução normaliza os valores armazenados para os dois formatos acima de cada maneira.

Conecte o campo Data Hora com seu token #

O campo Data Hora é um campo de token Exibir a data é um token no painel HTML:

<p class="event-when">Doors open {{ event_date }}</p>

A fiação mais comum é o painel JS. Porque o valor é estável Y-m-d H:i string, JavaScript pode analisá-lo e gerar uma contagem regressiva:

// JS panel
var deadline = new Date("{{ event_date }}".replace(" ", "T"));

var timer = setInterval(function () {
  var diff = deadline - new Date();
  if (diff <= 0) { clearInterval(timer); return; }
  var days  = Math.floor(diff / 86400000);
  var hours = Math.floor((diff % 86400000) / 3600000);
  document.querySelector(".event-countdown").textContent =
    days + "d " + hours + "h";
}, 1000);

Uma coisa que vale a pena saber antes de um lançamento internacional: a data analisada não tem fuso horário anexado, portanto new Date() interpreta-o na hora local de cada visitante Uma contagem regressiva para “18:00” termina às 18:00 em Berlim e novamente às 18:00 em Nova York Para um único prazo global, anexe um deslocamento explícito como +00:00 para a string antes de analisar.

Cuidado: o token imprime uma string simples, então cite-a em JavaScript. var deadline = "{{ event_date }}"; funciona; sem as aspas o valor renderizado é um erro de sintaxe E como o formato é corrigido pela configuração Habilitar Tempo, decida antecipadamente se o seu script espera 2026-12-31 ou 2026-12-31 18:00, então mantenha a alternância consistente com ela.

Use o controle Data Hora no Elementor #

Adicione seu widget personalizado a uma página no Elementor ou recarregue o editor se a página já estiver aberta. O campo é exibido como uma entrada de estilo de texto em seu rótulo; clicar nele abre o popover do calendário.

Escolha um dia, e com Habilitar Tempo ligado, defina a hora e os minutos abaixo do calendário A entrada preenche com o valor formatado e as atualizações de visualização Os editores nunca digitam a data manualmente, então o formato que seu script analisa é sempre o formato que chega.

Casos de uso comum #

• Widgets de contagem regressiva para lançamentos, vendas e eventos, com o painel JS fazendo as contas.
• Cartões evento que imprima uma data formatada ao lado de um local e título.
• Banners de oferta limitada que um script se esconde assim que o prazo passa.
• Displays de reservas e horários onde os horários de abertura ou fechamento alimentam a marcação.
• “Publicado em metadados estilo” para widgets de conteúdo personalizados.

Dicas para trabalhar com o campo Data Hora #

• Combine Habilitar Tempo para o trabalho. Uma contagem regressiva precisa do componente de tempo; um “publicado na linha” não. O formato armazenado segue a alternância.
• Cite o token em JS. O valor é uma string e datas não citadas quebram o script no momento em que ele é renderizado.
• Normalize antes de analisar. Substituindo o espaço por T, como no exemplo de contagem regressiva, mantém new Date() análise consistente entre navegadores.
• Defina um padrão no futuro para widgets de contagem regressiva, uma nova queda faz a contagem regressiva em vez de mostrar zeros.
• Use o Minute Increment para reduzir o ruído. Passos de quinze minutos são mais fáceis de escolher e ler do que minutos arbitrários.
• Lidar com o passado. Decida no script o que acontece quando o prazo expirar: ocultar o widget, mostrar uma mensagem ou parar em zero.

Perguntas frequentes #

Embrulhando #

O campo Data Hora do construtor de widgets tira a entrada de data das mãos dos editores e coloca uma string previsível na sua: um selecionador no painel, um token no modelo e formatos que os scripts podem analisar sem código defensivo. Emparelhe-o com o Campo alternador para alternar o comportamento de estado expirado, ou o Campo numérico para intervalos de atualização ajustáveis Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.