Fecha Hora

El Campo Fecha Hora le da a un widget personalizado un selector de calendario adecuado en lugar de un cuadro de fecha de texto libre. Los editores hacen clic en el campo en Elementor, se abre un calendario Flatpickr y eligen una fecha (y opcionalmente una hora) sin preocuparse nunca por escribir el formato que espera su widget. Dentro de los complementos maestros Creador de widgets, esa coherencia es el punto: el valor siempre llega en un formato predecible en el que su plantilla y script pueden confiar.

El campo Fecha y hora admite Condiciones como todo control, y su valor imprime a través del Motor de plantilla de sintaxis de ramita, para que puedas compararlo o envolverlo {% if %} bloques en tu plantilla. Ambas guías cubren la configuración y las limitaciones.

El campo se conecta a través de un token como todo campo de valor simple. Imprimir {{ event_date }} en el panel HTML para mostrar la fecha, o entréguela al panel JS donde una cuenta regresiva, una verificación de horas de apertura o un script de programación pueden analizarlo.

Qué hace el campo Fecha y hora #

• Representa un selector de calendario de clic para abrir (Flatpickr) en el panel Elementor del widget.
• Opcionalmente incluye un selector de tiempo junto al calendario.
• Almacena la selección como una cadena formateada, normalizada a Y-m-d H:i con tiempo habilitado o Y-m-d sin él.
• Imprime esa cadena en cualquier parte del panel HTML, CSS o JS {{ your_field_name }}.
• Alimenta JavaScript directamente, la ruta habitual para la cuenta regresiva y la programación de widgets.

Si los widgets personalizados son territorio nuevo, el Descripción general del creador de widgets es el mejor punto de partida; Esta página supone que conoces el editor.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un widget de cuenta regresiva de eventos con un campo Fecha y hora llamado event_date que el script del widget cuenta regresivamente.

Cómo agregar un campo Fecha y hora #

Arrastra el Fecha Hora campo desde el panel de campos a una sección debajo del Contenido pestaña. Sus opciones se abren a la izquierda una vez que aterriza.

Fecha Hora opciones de campo explicadas #

• Etiqueta: el texto que se muestra junto al selector en Elementor, por ejemplo “Fecha del evento”.
• Nombre: el identificador único al que se refieren sus plantillas. Sólo letras, números y guiones bajos, por ejemplo event_date.
• Predeterminado: la cadena de fecha de inicio con la que se envía el widget.
• Habilitar tiempo: añade un selector de horas y minutos al calendario. Con él activado, los valores salen como Y-m-d H:i (como 2026-12-31 18:00); sin él, como una llanura Y-m-d fecha.
• Incrementare minute: el paso en el que se mueve el selector de minutos, por lo que los editores pueden limitarse a espacios de 5, 15 o 30 minutos.
• Descripción, Mostrar etiqueta, Separador: las opciones de visualización estándar, más las condiciones para mostrar el campo solo cuando otro control tiene un valor determinado.

Debajo del capó el recolector acepta un picker_options objeto con más configuraciones de Flatpickr, incluido noCalendar para un selector de solo tiempo, dateFormat, time_24hr, y minDate/maxDate límites. La interfaz de usuario del generador mantiene los comunes, habilitar el incremento de tiempo y minutos, al frente y al centro, y el tiempo de ejecución normaliza los valores almacenados a los dos formatos anteriores en cualquier sentido.

Conecte el campo Fecha y hora con su token #

El campo Fecha y hora es un campo de token. Mostrar la fecha es un token en el panel HTML:

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

El cableado más común es el panel JS. Porque el valor es estable Y-m-d H:i cadena, JavaScript puede analizarlo e impulsar una cuenta regresiva:

// 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);

Una cosa que vale la pena saber antes de un lanzamiento internacional: la fecha analizada no tiene una zona horaria adjunta, por lo que new Date() lo interpreta en la hora local de cada visitante. Una cuenta atrás para “18:00” finaliza a las 18:00 en Berlín y nuevamente a las 18:00 en Nueva York. Para una fecha límite global única, agregue un desplazamiento explícito como +00:00 a la cadena antes del análisis.

Ai grijă: el token imprime una cadena simple, así que citelo en JavaScript. var deadline = "{{ event_date }}"; funciona; sin las comillas, el valor renderizado es un error de sintaxis. Y dado que el formato se fija mediante la configuración Habilitar hora, decida de antemano si su script lo espera 2026-12-31 o 2026-12-31 18:00, luego mantenga el interruptor coherente con él.

Utilice el control Fecha y hora en Elementor #

Agregue su widget personalizado a una página en Elementor o recargue el editor si la página ya estaba abierta. El campo se muestra como una entrada de estilo de texto debajo de su etiqueta; al hacer clic en él se abre la ventana emergente del calendario.

Elija un día y, con Habilitar hora activada, establezca la hora y los minutos debajo del calendario. La entrada se llena con el valor formateado y las actualizaciones de vista previa. Los editores nunca escriben la fecha a mano, por lo que el formato que analiza su script es siempre el formato que llega.

Casos de uso comunes #

• Widgets de cuenta regresiva para lanzamientos, ventas y eventos, con el panel de JS haciendo los cálculos.
• Tarjetas de eventos que imprimen una fecha formateada junto a un lugar y título.
• Banners de oferta limitada que un script oculta una vez que pasa la fecha límite.
• Exhibiciones de reservas y horarios donde los horarios de apertura o cierre alimentan el marcado.
• Metadatos de estilo “publicados en” para widgets de contenido personalizados.

Consejos para trabajar con el campo Fecha y hora #

• Haga coincidir el tiempo de habilitación con el trabajo. Una cuenta regresiva necesita el componente de tiempo; una línea “publicada en” no lo hace. El formato almacenado sigue al interruptor.
• Cita el token en JS. El valor es una cadena y las fechas sin comillas rompen el script en el momento en que se representa.
• Normalizar antes de analizar. Reemplazando el espacio con T, como en el ejemplo de cuenta regresiva, mantiene new Date() análisis consistente en todos los navegadores.
• Establezca un valor predeterminado en el futuro para widgets de cuenta regresiva, una nueva caída cuenta regresivamente en lugar de mostrar ceros.
• Utilice el incremento de minutos para reducir el ruido. Los pasos de quince minutos son más fáciles de elegir y leer que los minutos arbitrarios.
• Maneja el pasado. Decide en el script qué sucede cuando pasa la fecha límite: oculta el widget, muestra un mensaje o detente en cero.

Preguntas frecuentes #

Envolviendo #

El campo Fecha y hora del creador de widgets toma la entrada de fecha de las manos de los editores y coloca una cadena predecible en la suya: un selector en el panel, un token en la plantilla y formatos que los scripts pueden analizar sin código defensivo. Emparejarlo con el Campo conmutador para alternar el comportamiento del estado caducado, o el Campo numérico para intervalos de actualización sintonizables. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.