Datum Uhrzeit

Die Datum Zeitfeld Gibt einem benutzerdefinierten Widget einen richtigen Kalender-Picker statt eines Freitext-Datumsfeldes Editoren klicken auf das Feld in Elementor, ein Flatpickr-Kalender öffnet sich, und sie wählen ein Datum (und optional eine Uhrzeit) aus, ohne sich jemals Gedanken über die Eingabe des Formats zu machen, das Ihr Widget erwartet. Innerhalb der Master-Addons Widget-builder„Diese Konsistenz ist der springende Punkt: Der Wert kommt immer in einem vorhersehbaren Format an, auf das sich Ihre Vorlage und Ihr Skript verlassen können.

Das Feld Datumszeit unterstützt Bedingungen Wie jedes Steuerelement, und sein Wert druckt durch die Twig-Syntax-Vorlagen-EngineSie können es also vergleichen oder einpacken {% if %} Blöcke in Ihrer Vorlage Beide Leitfäden behandeln Einrichtung und Einschränkungen.

Das Feld verbindet sich wie jedes einfache Wertfeld durch einen Token Drucken {{ event_date }} Im HTML-Panel zeigen Sie das Datum an oder übergeben es dem JS-Panel, wo ein Countdown, eine Öffnungszeitenprüfung oder ein Planungsskript es analysieren können.

Was das Feld Datum Uhrzeit bewirkt #

• Rendert einen Click-to-Open-Kalender-Picker (Flatpickr) im Elementor-Panel des Widgets.
• Enthält optional einen Zeitwähler neben dem Kalender.
• Speichert die Auswahl als formatierte Zeichenfolge, normalisiert auf Y-m-d H:i Mit aktivierter Zeit oder Y-m-d Ohne es.
• Druckt diese Zeichenfolge an einer beliebigen Stelle im HTML-, CSS- oder JS-Panel durch {{ your_field_name }}.
• Fügt JavaScript direkt ein, die übliche Route für Countdown - und Planungs-Widgets.

Wenn benutzerdefinierte Widgets Neuland sind, ist die Übersicht über Widget Builder Der bessere Ausgangspunkt ist; Diese Seite geht davon aus, dass Sie sich im Editor auskennen.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget, das im Widget Builder-Editor geöffnet wird Unser Beispiel ist ein Event-Countdown-Widget mit einem Feld Datum Uhrzeit mit dem Namen event_date Das das Script des Widgets herunterzählt auf.

So fügen Sie ein Feld Datumszeit hinzu #

Ziehen Sie die Datum Uhrzeit Feld aus dem Feldfeld in einen Abschnitt unter dem Inhalt Tab. Seine Optionen öffnen sich links, sobald es gelandet ist.

Datum Uhrzeit Feldoptionen erklärt #

• Etikett: Der neben dem Picker in Elementor abgebildete Text, zum Beispiel “Event Date”.
• Name: Die eindeutige Kennung, auf die sich Ihre Vorlagen beziehen Nur Buchstaben, Zahlen und Unterstriche, zum Beispiel event_date.
• Standard: Die Startdatumssaite, mit der das Widget ausgeliefert wird.
• Aktivieren Sie die Zeit: Fügt dem Kalender einen Stunden - und Minutenwähler hinzu, bei eingeschaltetem kommen Werte als Y-m-d H:i (wie 2026-12-31 18:00); damit aus, als Klartext Y-m-d Datum.
• Minutenerhöhung: Der Schritt, in dem sich der Minutenwähler bewegt, sodass Editoren auf 5-, 15- oder 30-Minuten-Steckplätze begrenzt werden können.
• Beschreibung, Etikett anzeigen, Trenner: Die Standard-Anzeigemöglichkeiten, plus Bedingungen für die Anzeige des Feldes nur, wenn ein anderes Steuerelement einen bestimmten Wert hat.

Unter der Haube nimmt der Pflücker eine an picker_options Objekt mit weiteren Flatpickr-Einstellungen, einschließlich noCalendar Für einen reinen Zeitpflücker dateFormat, time_24hr, und minDate/maxDate Grenzen. Die Builder-Benutzeroberfläche behält die gemeinsamen, Zeit- und Minuteninkrement aktivieren, vorne und in der Mitte, und die Laufzeit normalisiert gespeicherte Werte in beide Richtungen auf die beiden oben genannten Formate.

Verbinden Sie das Feld Datumszeit mit seinem Token #

Das Feld Datumszeit ist ein Tokenfeld Die Anzeige des Datums ist ein Token im HTML-Panel:

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

Die üblichere Verkabelung ist das JS-Panel, denn der Wert ist stabil Y-m-d H:i Zeichenfolge, JavaScript kann es analysieren und einen Countdown steuern:

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

Eines ist vor einem internationalen Start wissenswert: An das analysierte Datum ist keine Zeitzone angehängt new Date() Interpretiert es in der Ortszeit jedes Besuchers Ein Countdown auf “18:00” endet in Berlin um 18:00 Uhr und in New York erneut um 18:00. Für eine einzige globale Frist einen expliziten Offset wie anhängen +00:00 vor dem Parsen an die Zeichenfolge.

Pass auf: Der Token druckt eine einfache Zeichenfolge, also zitieren Sie sie in JavaScript. var deadline = "{{ event_date }}"; Funktioniert; ohne die Anführungszeichen ist der gerenderte Wert ein Syntaxfehler Und da das Format durch die Einstellung Zeit aktivieren festgelegt ist, entscheiden Sie im Voraus, ob Ihr Skript erwartet 2026-12-31 oder 2026-12-31 18:00Halten Sie dann den Knebel im Einklang damit.

Verwenden Sie die Datumszeitsteuerung in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war. Das Feld wird als Texteingabe unter Ihrem Etikett angezeigt; Wenn Sie darauf klicken, wird der Kalender-Popover geöffnet.

Wählen Sie einen Tag aus und stellen Sie bei aktivierter Zeit die Stunde und Minuten unter dem Kalender ein. Die Eingabe wird mit dem formatierten Wert und den Vorschau-Updates gefüllt. Redakteure geben das Datum nie von Hand ein, daher ist das Format, das Ihr Skript analysiert, immer das Format, das ankommt.

Häufige Anwendungsfälle #

• Countdown-widgets Für Starts, Verkäufe und Veranstaltungen, wobei das JS-Gremium die Rechnung übernimmt.
• Ereigniskarten Die ein formatiertes Datum neben einem Veranstaltungsort und Titel drucken.
• Banner mit begrenztem Angebot dass sich ein Drehbuch versteckt, sobald die Frist abgelaufen ist.
• Buchungs- und Terminanzeigen Wo Öffnungs- oder Schließzeiten den Aufschlag speisen.
• “Veröffentlicht auf” Stilmetadaten Für benutzerdefinierte Content-Widgets.

Tipps für die Arbeit mit dem Feld Datumszeit #

• Match Aktivieren Sie die Zeit für den Job. Ein Countdown benötigt die Zeitkomponente; eine Zeile “veröffentlicht auf” nicht. Das gespeicherte Format folgt dem Umschalten.
• Zitieren Sie den Token in JS. Der Wert ist eine Zeichenfolge, und nicht zitierte Daten brechen das Skript in dem Moment, in dem es rendert.
• Normalisieren vor dem Parsen. Ersetzen des Raums durch T, wie im Countdown-Beispiel, behält new Date() Das Parsen ist browserübergreifend konsistent.
• Legen Sie in Zukunft einen Standard fest Bei Countdown-Widgets zählt also ein neuer Drop nach unten, anstatt Nullen anzuzeigen.
• Verwenden Sie die Minutenerhöhung, um Rauschen zu reduzieren. Fünfzehn-Minuten-Schritte sind einfacher auszuwählen und zu lesen als beliebige Minuten.
• Mit der Vergangenheit umgehen. Entscheiden Sie im Skript, was passiert, wenn die Frist abgelaufen ist: das Widget ausblenden, eine Nachricht anzeigen oder bei Null anhalten.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Date Time nimmt den Datumseintrag aus den Händen der Redakteure und legt eine vorhersehbare Zeichenfolge in Ihre: einen Picker im Panel, einen Token in der Vorlage und Formate, die Skripte ohne Defensivcode analysieren können Koppeln Sie es mit dem Schalterfeld Verhalten im abgelaufenen Zustand umzuschalten, oder die Zahlenfeld Für einstellbare Aktualisierungsintervalle Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.