Date Heure

Le champ Date Heure ajoute un sélecteur de calendrier à un widget personnalisé que vous construisez avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs cliquent sur le champ dans Elementor, choisissent un jour et, si vous le permettez, une heure. Le widget a le choix comme valeur de texte brut telle que 2026-10-24 19:30(en), que vous pouvez imprimer en HTML ou passer à un script de compte à rebours.

Date Time est un champ Pro. Le plugin gratuit comprend un Widget Builder limité et l'ensemble complet des champs est livré avec Maître Addons Pro.

Ce que fait le champ Date Heure #

• Ajoute une entrée de date au panneau de votre widget dans Elementor En cliquant dessus, vous ouvrez un calendrier.
• Avec Activer l'heure allumé, le calendrier obtient une ligne d'heure et de minute en dessous L'horloge est toujours 24 heures.
• Enregistre la valeur choisie sous forme de texte : Y-m-d H:i (par exemple 2026-10-24 19:30) avec le temps, ou Y-m-d (2026-10-24) sans.
• Imprime cette valeur partout où vous placez son jeton, comme {{ event_date }}(en), dans le panneau HTML, CSS ou JS.

Nouveau au constructeur ? lire le Aperçu du constructeur de widgets tout d'abord, revenez avec un widget ouvert.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
• Un widget ouvert dans le Widget Builder L'exemple de ce guide est un widget “Event Countdown” : un champ Texte nommé event_title, un champ Date Heure nommé event_date« , et un court scénario qui compte jusqu'à cette date ».

Comment ajouter un champ Date Heure #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Sur le Contenu onglet, ajoutez une section s'il n'y en a pas encore, par exemple“Event”.
3. taper à la date dans le champ champ rechercher box à gauche.
4. Glisser Date Heure dans la section Cliquez sur le crayon sur le champ pour ouvrir ses paramètres.

Options du champ Date Heure expliquées #

• Étiquette: le texte à côté de l'entrée dans Elementor, par exemple “Event Date”.
• Nom: l'identifiant unique du champ et le nom de son jeton Utilisez uniquement des lettres, des chiffres et des traits de soulignement, par exemple event_date.
• Description : un indice affiché sous l'entrée dans Elementor, tel que “Cueillez la date et l'heure auxquelles se termine le compte à rebours.”
• Activer l'heure : ajoute la ligne des heures et des minutes au calendrier et bascule le format enregistré à partir de Y-m-d à Y-m-d H:i.
• Incrémentation de minute : jusqu'où les minutes se déplacent à chaque clic des flèches La valeur par défaut est 1. avec 15, les flèches passent par :00, :15, :30 et :45.
• Valeur par défaut : la date à laquelle commence une nouvelle copie du widget.

La zone Valeur par défaut ouvre le même calendrier, vous choisissez donc la date de début au lieu de la taper La ligne de temps apparaît ici aussi lorsque l'heure d'activation est activée.

Pour un compte à rebours, choisissez une date par défaut dans le futur Un nouveau widget compte alors immédiatement à rebours au lieu d'afficher des zéros.

Paramètres communs #

• Afficher l'étiquette cache ou montre l'étiquette dans le panneau.
• Bloc d'étiquettes met l'étiquette sur sa propre ligne au-dessus de l'entrée Allumez-la si votre étiquette est longue.
• conditions affiche le champ uniquement lorsqu'un autre contrôle a une certaine valeur, par exemple un sélecteur de” à décompte “Show. Voir conditions.
• Séparateur dessine une ligne de séparation avant ou après la commande.

Contrôle réactif, Support dynamique, Frontend disponible, Classes de contrôle et Sélecteur apparaissent sur chaque champ Vous n'avez besoin d'aucun d'entre eux pour la configuration dans ce guide, et le Sélecteur peut rester vide car un sélecteur de date n'écrit pas CSS.

Le sélecteur n'a pas d'options pour une horloge uniquement horaire ou pour bloquer les dates passées. Les éditeurs peuvent choisir n’importe quel jour.

Utilisez la date dans votre modèle #

Imprimez le jeton où que la date apparaisse Dans le widget Compte à rebours d'événements, le HTML met la date dans une ligne de texte et dans un data-deadline attribut que lit le 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>

Le {% if event_date %} vérifier les choses Si un éditeur efface l'entrée, le jeton n'imprime rien La valeur par défaut n'est plus utilisée, et sans la vérification, le compte à rebours s'afficherait NaN.

Construire un compte à rebours dans le panneau JS #

Le panneau JS exécute ce script Il trouve chaque compte à rebours, transforme le texte enregistré en date et met à jour les chiffres toutes les 30 secondes :

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") tourne 2026-10-24 19:30 dans 2026-10-24T19:30: un format que chaque navigateur lit de la même manière.
• isNaN(deadline) arrête le script lorsque la date est vide ou ne peut pas être lue.
• La lecture de la valeur à partir d'un attribut de données permet à chaque widget de la page de compter jusqu'à sa propre date.

Les jetons fonctionnent également directement dans le panneau JS. Dans nos tests, les var deadline = "{{ event_date }}"; imprimé la date enregistrée Conservez les guillemets, car une date nue n'est pas JavaScript valide.

La valeur enregistrée n'a pas de fuseau horaire Le navigateur le lit comme heure locale du visiteur, donc un compte à rebours jusqu'à 19h30 se termine à 19h30 à Londres et de nouveau à 19h30 à New York. Pour un moment mondial, ajoutez un décalage à la chaîne avant d'analyser, par exemple 2026-10-24T19:30:00+00:00.

Utilisez le contrôle Date Time dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte Le champ se trouve sur le Contenu onglet sous votre étiquette Cliquez sur l'entrée pour ouvrir le calendrier, choisissez un jour, puis définissez l'heure et les minutes dans la ligne ci-dessous Les mises à jour de l'aperçu dès que vous choisissez.

Le nom du mois a une liste déroulante et l'année est une zone numérique, donc avancer de mois ne prend pas beaucoup de clics.

Cas d'utilisation courants #

• Compte à rebours pour les lancements, les ventes et les webinaires.
• Cartes d'événement qui indiquent la date à côté du titre et du lieu.
• Offrez des bannières qu'un script cache une fois la date limite passée.
• Horaires d'ouverture ou de fermeture imprimés dans un widget horaire.

Conseils pour travailler avec le champ Date Heure #

• Décidez de Activer l'heure avant que les éditeurs n'utilisent le widget. Le format ne change que pour les dates choisies après que vous l'ayez changé Une valeur enregistrée sous 2026-10-24 19:30 garde son heure même après avoir désactivé le temps d'activation.
• Toujours gérer une valeur vide. Enveloppez le balisage {% if %} et vérifiez une date non valide dans le script.
• Prévoyez des dates dans le passé. L'exemple s'arrête à zéro Vous pouvez également masquer le widget ou afficher un message “This event has end”.
• Utilisez une incrémentation de minute de 5, 15 ou 30 pour les événements qui commencent à l'heure ou à la demi-heure.
• Écrivez une description claire. Dites si la date est le début, la fin ou la date limite, afin que les éditeurs choisissent la bonne.

Foire aux questions #

Envelopper #

Ajoutez le champ Date Heure à une section Contenu, choisissez s'il a besoin d'une heure et imprimez {{ event_date }} dans votre HTML ou lisez-le dans le panneau JS. Vérifiez les valeurs vides et le widget tient le coup lorsqu'un éditeur efface la date Associez-le au Champ de commutation pour laisser les éditeurs cacher le compte à rebours, et voir tarification pour ce que chaque plan comprend.