Datum Uhrzeit

Das Feld Datumszeit fügt einem benutzerdefinierten Widget, das Sie mit den Master-Addons erstellen, einen Kalenderauswahlfeld hinzu Widget-builder. Editoren klicken das Feld in Elementor, wählen einen Tag und wenn Sie es zulassen eine Uhrzeit aus Das Widget erhält die Wahl als Klartextwert wie 2026-10-24 19:30, die Sie im HTML ausdrucken oder an ein Countdown-Skript übergeben können.

Date Time ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was das Feld Datum Uhrzeit bewirkt #

• Fügt eine Datumseingabe in das Panel Ihres Widgets in Elementor hinzu. Wenn Sie darauf klicken, wird ein Kalender geöffnet.
• Mit Zeit aktivieren An, der Kalender bekommt eine Stunde und Minute Reihe darunter Die Uhr ist immer 24-Stunden.
• Speichert den ausgewählten Wert als Text: Y-m-d H:i (zum Beispiel 2026-10-24 19:30) mit der Zeit, oder Y-m-d (2026-10-24) ohne es.
• Drucke, die Wert darauf legen, wo immer Sie ihren Token platzieren, z {{ event_date }}, im HTML, CSS - oder JS-Panel.

Neu beim Bauherrn? lesen Sie die Übersicht über Widget Builder Kommen Sie dann zuerst mit geöffnetem Widget zurück.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor und Master Addons Pro, beide aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget öffnet sich im Widget Builder Das Beispiel in diesem Handbuch ist ein “Event Countdown” - Widget: ein Textfeld namens event_titleEin Feld mit der Datumszeit benannt event_date, und ein kurzes Skript, das bis zu diesem Datum zählt.

So fügen Sie ein Feld Datumszeit hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Auf der Inhalt Tab, fügen Sie einen Abschnitt hinzu, falls noch keins vorhanden ist, zum Beispiel “Event”.
3. Typ date Im Feldsuchfeld links.
4. Ziehen Datum Uhrzeit In den Abschnitt Klicken Sie auf den Bleistift auf dem Feld, um seine Einstellungen zu öffnen.

Datum Uhrzeit Feldoptionen erklärt #

• Etikett: Der Text neben der Eingabe in Elementor, zum Beispiel “Event Date”.
• Name: Die eindeutige ID des Feldes und der Name seines Tokens Verwenden Sie zum Beispiel nur Buchstaben, Zahlen und Unterstriche event_date.
• Beschreibung: Ein unter der Eingabe in Elementor angezeigter Hinweis, wie zum Beispiel “Pick the date and time the countdown ends”
• Aktivieren Sie die Zeit: Fügt die Stunden - und Minutenzeile zum Kalender hinzu und wechselt das gespeicherte Format von Y-m-d zu Y-m-d H:i.
• Minutenerhöhung: Wie weit die Minuten mit jedem Klick der Pfeile gehen Voreingestellt ist 1. Bei 15 gehen die Pfeile durch:00, :15,:30 und:45.
• Standardwert: Das Datum, mit dem eine neue Kopie des Widgets beginnt.

Das Feld Standardwert öffnet den gleichen Kalender, also wählen Sie das Startdatum aus, anstatt es einzugeben. Die Zeitzeile erscheint auch hier, wenn die Aktivierungszeit aktiviert ist.

Wählen Sie für einen Countdown ein Standarddatum in der Zukunft, ein neues Widget zählt dann sofort herunter, anstatt Nullen anzuzeigen.

Gemeinsame Einstellungen #

• Etikett anzeigen Versteckt oder zeigt das Etikett im Panel.
• Beschriftungsblock Legt das Etikett auf eine eigene Linie über dem Eingang Schalten Sie es ein, wenn Ihr Etikett lang ist.
• Bedingungen Zeigt das Feld nur an, wenn ein anderes Steuerelement einen bestimmten Wert hat, zum Beispiel ein Umschalter “Countdown anzeigen” Siehe Bedingungen.
• Trenner Zeichnet eine Trennlinie vor oder nach der Steuerung.

Responsive Control, Dynamic Support, Frontend Available, Control Classes und Selector erscheinen auf jedem Feld, für das Setup in diesem Guide benötigt man keines davon, und der Selector kann leer bleiben, da ein Date Picker kein CSS schreibt.

Der Picker hat keine Optionen für eine reine Zeituhr oder für das Blockieren vergangener Daten. Redakteure können jeden Tag auswählen.

Verwenden Sie das Datum in Ihrer Vorlage #

Drucken Sie das Token überall dort aus, wo das Datum erscheinen soll Im Event Countdown Widget setzt das HTML das Datum in eine Textzeile und in eine data-deadline Attribut, das das Skript lautet:

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

Die {% if event_date %} Prüfen zählt, löscht ein Editor die Eingabe, druckt der Token nichts Der Standardwert wird nicht erneut verwendet, und ohne die Prüfung würde der Countdown angezeigt NaN.

Erstellen Sie einen Countdown im JS-Panel #

Das JS-Panel führt dieses Skript aus Es findet jeden Countdown, verwandelt den gespeicherten Text in ein Datum und aktualisiert die Zahlen alle 30 Sekunden:

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") Wendet 2026-10-24 19:30 In 2026-10-24T19:30„ein Format, das jeder Browser auf die gleiche Weise liest.
• isNaN(deadline) Stoppt das Skript, wenn das Datum leer ist oder nicht gelesen werden kann.
• Durch das Lesen des Werts aus einem Datenattribut wird jedes Widget auf der Seite bis zu seinem eigenen Datum heruntergezählt.

Token arbeiten auch direkt im JS-Panel In unseren Tests, die var deadline = "{{ event_date }}"; Das gespeicherte Datum gedruckt Die Zitate behalten, denn ein nacktes Datum ist nicht gültig JavaScript.

Der gespeicherte Wert hat keine Zeitzone Der Browser liest ihn als Ortszeit des Besuchers, so endet ein Countdown auf 19:30 in London um 19:30 und in New York erneut um 19:30. Fügen Sie für einen weltweiten Moment vor dem Parsen einen Offset zum Beispiel in die Zeichenfolge ein 2026-10-24T19:30:00+00:00.

Verwenden Sie die Datumszeitsteuerung in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Das Feld sitzt auf der Inhalt Tab unter Ihrem Label Klicken Sie auf die Eingabe, um den Kalender zu öffnen, wählen Sie einen Tag, dann stellen Sie die Stunde und Minuten in der Zeile unten einDie Vorschau aktualisiert sich, sobald Sie auswählen.

Der Monatsname hat einen Dropdown und das Jahr ist ein Zahlenfeld, sodass es nicht viele Klicks erfordert, Monate im Voraus zu bewegen.

Häufige Anwendungsfälle #

• Countdowns für Starts, Verkäufe und Webinare.
• Ereigniskarten, die neben Titel und Veranstaltungsort das Datum anzeigen.
• Bieten Sie Banner an, die ein Skript nach Ablauf der Frist versteckt.
• Öffnungs - oder Schließzeiten in einem Zeitplan-Widget gedruckt.

Tipps für die Arbeit mit dem Feld Datumszeit #

• Entscheiden Sie sich für Zeit aktivieren, bevor Editoren das Widget verwenden. Das Format ändert sich nur für die Daten, die nach dem Umschalten ausgewählt wurden. Ein Wert, der als gespeichert wurde 2026-10-24 19:30 Hält seine Zeit auch nach dem Ausschalten von Zeit aktivieren.
• Behandeln Sie immer einen leeren Wert. Wickeln Sie das Markup ein {% if %} und im Skript auf ein ungültiges Datum prüfen.
• Termine in der Vergangenheit planen. Das Beispiel stoppt bei Null Man könnte das Widget auch ausblenden oder eine Meldung “Dieses Ereignis ist beendet” anzeigen.
• Verwenden Sie eine minute Inkrement von 5, 15 oder 30 Für Veranstaltungen, die zur vollen oder halben Stunde beginnen.
• Schreiben Sie eine klare Beschreibung. Sagen Sie, ob das Datum der Anfang, das Ende oder die Frist ist, also wählen die Redakteure das richtige aus.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie das Feld Datumszeit zu einem Inhaltsabschnitt hinzu, wählen Sie aus, ob eine Zeit benötigt wird, und drucken Sie {{ event_date }} In Ihrem HTML oder lesen Sie es im JS-Panel nach leeren Werten und das Widget hält, wenn ein Editor das Datum löscht Koppeln Sie es mit dem Schalterfeld Redakteuren den Countdown verbergen und sehen zu lassen Preisbildung Für das, was jeder Plan beinhaltet.