Date Heure

Le Champ Heure Date donne à un widget personnalisé un sélecteur de calendrier approprié au lieu d'une zone de date en texte libre Les éditeurs cliquent sur le champ dans Elementor, un calendrier Flatpickr s'ouvre et choisissent une date (et éventuellement une heure) sans jamais se soucier de taper le format attendu par votre widget. À l’intérieur des modules complémentaires principaux Constructeur de widgets: cette cohérence est tout l’intérêt : la valeur arrive toujours dans un format prévisible sur lequel votre modèle et votre script peuvent s’appuyer.

Le champ Date Heure prend en charge Conditions comme tout contrôle, et sa valeur s'imprime à travers le Moteur de modèles de syntaxe Twig, pour que vous puissiez le comparer ou l'envelopper {% if %} blocs dans votre modèle Les deux guides couvrent la configuration et les limitations.

Le champ se connecte via un jeton comme chaque champ de valeur simple Imprimer {{ event_date }} dans le panneau HTML pour afficher la date, ou la remettre au panneau JS où un compte à rebours, une vérification des heures d'ouverture ou un script de planification peut l'analyser.

Ce que fait le champ Date Heure #

• Rend un sélecteur de calendrier click-to-open (Flatpickr) dans le panneau Élémenteur du widget.
• Comprend éventuellement un sélecteur de temps à côté du calendrier.
• Stocke le choix sous forme de chaîne formatée, normalisée Y-m-d H:i avec le temps activé ou Y-m-d sans elle.
• Imprime cette chaîne n'importe où dans le panneau HTML, CSS ou JS {{ your_field_name }}.
• Alimente directement JavaScript, la route habituelle pour le compte à rebours et la planification des widgets.

Si les widgets personnalisés sont un nouveau territoire, le Aperçu du constructeur de widgets est le meilleur point de départ ; cette page suppose que vous connaissez l'éditeur.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de compte à rebours d'événement avec un champ Date Time nommé event_date que le script du widget compte à rebours jusqu'à.

Comment ajouter un champ Date Heure #

Faites glisser le Date Heure champ du panneau des champs dans une section sous le Contenu onglet. Ses options s'ouvrent à gauche une fois qu'il atterrit.

Options du champ Date Heure expliquées #

• Étiquette: le texte affiché à côté du sélecteur dans Elementor, par exemple“Event Date”.
• Nom: l'identifiant unique auquel vos modèles font référence Lettres, chiffres et soulignements uniquement, par exemple event_date.
• Par défaut: la chaîne de date de début avec laquelle le widget est livré.
• Activer l'heure : ajoute un sélecteur d'heures et de minutes au calendrier Avec celui-ci allumé, les valeurs sortent comme Y-m-d H:i (comme 2026-12-31 18:00) ; avec ça éteint, comme une plaine Y-m-d date.
• Incrémentation de minute : l'étape dans laquelle le sélecteur de minutes se déplace, de sorte que les éditeurs peuvent être limités à des créneaux de 5, 15 ou 30 minutes.
• Description, Afficher l'étiquette, séparateur : les options d'affichage standard, plus Conditions d'affichage du champ uniquement lorsqu'un autre contrôle a une certaine valeur.

Sous le capot, le cueilleur accepte un picker_options objet avec d'autres paramètres Flatpickr, notamment noCalendar pour un cueilleur à temps seulement, dateFormat, time_24hr, et minDate/maxDate limites. L'interface utilisateur du constructeur conserve les formats courants, Activer l'incrémentation de temps et de minute, avant et central, et le runtime normalise les valeurs stockées aux deux formats ci-dessus dans un sens ou dans l'autre.

Connectez le champ Date Heure avec son jeton #

Le champ Date Heure est un champ de jeton L'affichage de la date est un jeton dans le panneau HTML :

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

Le câblage le plus courant est le panneau JS. Parce que la valeur est stable Y-m-d H:i string, JavaScript peut l'analyser et effectuer un compte à rebours :

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

Une chose à savoir avant un lancement international : la date analysée n'a pas de fuseau horaire attaché, donc new Date() l'interprète à l'heure locale de chaque visiteur Un compte à rebours jusqu'à “18h00” se termine à 18h00 à Berlin et de nouveau à 18h00 à New York Pour une seule échéance globale, ajoutez un décalage explicite comme +00:00 à la chaîne avant d'analyser.

Attention: le jeton imprime une chaîne simple, alors citez-la en JavaScript. var deadline = "{{ event_date }}"; fonctionne ; sans les guillemets, la valeur rendue est une erreur de syntaxe. Et comme le format est corrigé par le paramètre Activer l'heure, décidez dès le départ si votre script s'attend 2026-12-31 ou 2026-12-31 18:00(en), alors gardez la bascule cohérente avec elle.

Utilisez le contrôle Date Time dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, ou rechargez l'éditeur si la page était déjà ouverte Le champ s'affiche comme une entrée de style texte sous votre étiquette ; en cliquant dessus, vous ouvrez la fenêtre contextuelle du calendrier.

Choisissez un jour, et avec Activer l'heure, définissez l'heure et les minutes en dessous du calendrier L'entrée se remplit de la valeur formatée et des mises à jour de l'aperçu Les éditeurs ne tapent jamais la date à la main, donc le format que votre script analyse est toujours le format qui arrive.

Cas d'utilisation courants #

• Widgets de compte à rebours pour les lancements, les ventes et les événements, le panel JS fait le calcul.
• Cartes d'événements qui impriment une date formatée à côté d'un lieu et d'un titre.
• Bannières à offre limitée qu'un script se cache une fois la date limite passée.
• Affichage des réservations et des horaires où les heures d'ouverture ou de fermeture alimentent le balisage.
• “Publié sur les métadonnées de style” pour les widgets de contenu personnalisés.

Conseils pour travailler avec le champ Date Heure #

• Faites correspondre Activer le temps jusqu'au travail. Un compte à rebours a besoin de la composante temporelle ; une“publiée sur la ligne” ne. Le format stocké suit la bascule.
• Citez le jeton dans JS. La valeur est une chaîne et les dates non citées brisent le script au moment où il se produit.
• Normaliser avant d'analyser. Remplacer l'espace par T(comme dans l'exemple du compte à rebours), conserve new Date() analyse cohérente sur tous les navigateurs.
• Définir un défaut dans le futur pour les widgets de compte à rebours, une nouvelle goutte compte à rebours au lieu d'afficher des zéros.
• Utilisez l'incrémentation de minute pour réduire le bruit. Les pas de quinze minutes sont plus faciles à choisir et à lire que les minutes arbitraires.
• Gérer le passé. Décidez dans le script de ce qui se passe lorsque la date limite est dépassée : masquer le widget, afficher un message ou arrêter à zéro.

Foire aux questions #

Envelopper #

Le champ Date Heure du constructeur de widgets sort l'entrée de date des mains des éditeurs et met une chaîne prévisible dans la vôtre : un sélecteur dans le panneau, un jeton dans le modèle et les formats que les scripts peuvent analyser sans code défensif. Associez-le au Champ de commutation pour basculer le comportement à état expiré, ou le Champ numéro pour des intervalles de rafraîchissement accordables Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.