Fecha Hora

El campo Fecha y hora agrega un selector de calendario a un widget personalizado que cree con los complementos maestros Creador de widgets. Los editores hacen clic en el campo en Elementor, eligen un día y, si lo permiten, una hora. El widget tiene la opción como valor de texto sin formato, como por ejemplo 2026-10-24 19:30, que puedes imprimir en HTML o pasar a un script de cuenta regresiva.

La fecha y hora es un campo profesional. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Fecha y hora #

• Agrega una entrada de fecha al panel de su widget en Elementor. Al hacer clic en él se abre un calendario.
• Con Habilitar tiempo encendido, el calendario tiene una fila de horas y minutos debajo. El reloj siempre es de 24 horas.
• Guarda el valor elegido como texto: Y-m-d H:i (de exemplu 2026-10-24 19:30) cu timp, sau Y-m-d (2026-10-24) fără asta.
• Imprime ese valor dondequiera que coloques su token, como {{ event_date }}, en el panel HTML, CSS o JS.

¿Nuevo para el constructor? Leer el Descripción general del creador de widgets primero, luego regresa con un widget abierto.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Master Addons para Elementor y Master Addons Pro, ambos activos. El guía de instalación configuración de cubiertas.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget de “Cuenta regresiva de eventos”: un campo de texto llamado event_title, un campo Fecha y hora llamado event_date, y un guión breve que cuenta atrás hasta esa fecha.

Cómo agregar un campo Fecha y hora #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. En el Contenido tab, agrega una sección si aún no la hay, por ejemplo “Evento”.
3. Tipo date en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Fecha Hora en la sección. Haga clic en el lápiz en el campo para abrir su configuración.

Fecha Hora opciones de campo explicadas #

• Etiqueta: el texto al lado de la entrada en Elementor, por ejemplo “Fecha del evento”.
• Nombre: el ID único del campo y el nombre de su token. Utilice únicamente letras, números y guiones bajos, por ejemplo event_date.
• Descripción: una pista que se muestra debajo de la entrada en Elementor, como “Elija la fecha y hora en que finaliza la cuenta regresiva”
• Habilitar tiempo: agrega la fila de horas y minutos al calendario y cambia el formato guardado Y-m-d a Y-m-d H:i.
• Incrementare minute: qué tan lejos se mueven los minutos con cada clic de las flechas. El valor predeterminado es 1. Con 15, las flechas pasan por :00, :15, :30 y :45.
• Valoarea implicită: la fecha con la que comienza una nueva copia del widget.

El cuadro Valor predeterminado abre el mismo calendario, por lo que elige la fecha de inicio en lugar de escribirla. La fila de tiempo también aparece aquí cuando Activar hora está activado.

Para una cuenta regresiva, elija una fecha predeterminada en el futuro. Luego, un nuevo widget cuenta regresivamente en lugar de mostrar ceros.

Configuraciones comunes #

• Mostrar etiqueta oculta o muestra la etiqueta en el panel.
• Bloque de etiquetas coloca la etiqueta en su propia línea encima de la entrada. Enciéndelo si tu etiqueta es larga.
• Condiciones muestra el campo sólo cuando otro control tiene un valor determinado, por ejemplo un conmutador “Mostrar cuenta atrás”. Ver Condiciones.
• Separador dibuja una línea divisoria antes o después del control.

Control responsivo, soporte dinámico, interfaz disponible, clases de control y selector aparecen en todos los campos. No necesitas ninguno de ellos para la configuración de esta guía y el selector puede permanecer vacío porque un selector de fechas no escribe CSS.

El selector no tiene opciones para un reloj de solo hora ni para bloquear fechas pasadas. Los editores pueden elegir cualquier día.

Utilice la fecha en su plantilla #

Imprima el token dondequiera que aparezca la fecha. En el widget Cuenta regresiva de eventos, el HTML coloca la fecha en una línea de texto y en a data-deadline atributo que dice el script:

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

El {% if event_date %} verificar asuntos. Si un editor borra la entrada, el token no imprime nada. El valor predeterminado no se vuelve a utilizar y sin la verificación se mostraría la cuenta regresiva NaN.

Cree una cuenta regresiva en el panel JS #

El panel JS ejecuta este script. Encuentra cada cuenta regresiva, convierte el texto guardado en una fecha y actualiza los números 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") se vuelve 2026-10-24 19:30 en 2026-10-24T19:30, un formato que cada navegador lee de la misma manera.
• isNaN(deadline) detiene el script cuando la fecha está vacía o no se puede leer.
• Leer el valor de un atributo de datos mantiene cada widget de la página en cuenta regresiva hasta su propia fecha.

Los tokens también funcionan directamente en el panel JS. En nuestras pruebas, var deadline = "{{ event_date }}"; imprime la fecha guardada. Mantenga las comillas porque una fecha simple no es válida para JavaScript.

El valor guardado no tiene zona horaria. El navegador lo lee como la hora local del visitante, por lo que la cuenta regresiva hasta las 19:30 termina a las 19:30 en Londres y nuevamente a las 19:30 en Nueva York. Para un momento mundial, agregue un desplazamiento a la cadena antes de analizar, por ejemplo 2026-10-24T19:30:00+00:00.

Utilice el control Fecha y hora en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. El campo se encuentra en el Contenido pestaña debajo de su etiqueta. Haga clic en la entrada para abrir el calendario, elija un día y luego configure la hora y los minutos en la fila siguiente. La vista previa se actualiza tan pronto como elija.

El nombre del mes tiene un menú desplegable y el año es un cuadro numérico, por lo que avanzar meses no requiere muchos clics.

Casos de uso comunes #

• Cuentas atrás para lanzamientos, ventas y seminarios web.
• Tarjetas de eventos que muestran la fecha junto al título y lugar.
• Ofrezca pancartas que un script oculte una vez pasada la fecha límite.
• Horarios de apertura o cierre impresos en un widget de horario.

Consejos para trabajar con el campo Fecha y hora #

• Decida habilitar el tiempo antes de que los editores usen el widget. El formato solo cambia para las fechas elegidas después de cambiarlo. Un valor guardado como 2026-10-24 19:30 mantiene su tiempo incluso después de desactivar Enable Time.
• Maneje siempre un valor vacío. Envuelva el marcado {% if %} y verifique si hay una fecha no válida en el script.
• Planifique fechas en el pasado. El ejemplo se detiene en cero. También puedes ocultar el widget o mostrar un mensaje “Este evento ha finalizado”.
• Utilice un incremento de minuto de 5, 15 o 30 para eventos que comienzan en la hora o media hora.
• Escribe una descripción clara. Diga si la fecha es el inicio, el final o la fecha límite, para que los editores elijan la correcta.

Preguntas frecuentes #

Envolviendo #

Agregue el campo Fecha y hora a una sección Contenido, elija si necesita una hora e imprima {{ event_date }} en su HTML o léalo en el panel JS. Verifique valores vacíos y el widget aguantará cuando un editor borre la fecha. Emparejarlo con el Campo conmutador para que los editores oculten la cuenta regresiva y vean precios por lo que incluye cada plan.