Dato Tid

Feltet Datotid føjer en kalendervælger til en brugerdefineret widget, du bygger med Mastertilføjelserne Widget Builder. Redaktører klikker på feltet i Elementor, vælger en dag og, hvis du tillader det, en tid. Widgetten får valget som en almindelig tekstværdi som f.eks 2026-10-24 19:30, som du kan udskrive i HTML eller videregive til et nedtællingsscript.

Dato Tid er et Pro felt. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt af felter leveres med Master Addons Pro.

Hvad feltet Datotid gør #

• Tilføjer et datoinput til din widgets panel i Elementor. Hvis du klikker på det, åbnes en kalender.
• Med Aktiver tid på får kalenderen en time og minutrække nedenunder. Uret er altid 24-timers.
• Gemmer den valgte værdi som tekst: Y-m-d H:i (for eksempel 2026-10-24 19:30) med tiden, eller Y-m-d (2026-10-24) uden den.
• Udskriver den værdi, uanset hvor du placerer dens token, f.eks {{ event_date }}, i panelet HTML, CSS eller JS.

Ny hos bygherren? Læs den Widget Builder oversigt først, så kom tilbage med en widget åben.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor og Master Addons Pro, begge aktive. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Event Countdown” widget: et Tekstfelt med navnet event_title, et Dato Tidsfelt navngivet event_date, og et kort script, der tæller ned til den dato.

Sådan tilføjes et felt Datotid #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. På Content tab, tilføj en sektion, hvis der ikke er en endnu, for eksempel “Begivenhed”.
3. Type date i feltsøgefeltet til venstre.
4. Drag Dato Tid ind i sektionen. Klik på blyanten på feltet for at åbne dens indstillinger.

Dato Tid feltindstillinger forklaret #

• Etiket: teksten ud for inputtet i Elementor, for eksempel “Begivenhedsdato”.
• Navn: feltets unikke id og navnet på dets token. Brug kun bogstaver, tal og understregninger, f.eks event_date.
• Beskrivelse: et tip vist under inputtet i Elementor, såsom “Vælg dato og klokkeslæt, hvor nedtællingen slutter.”
• Aktiver tid: tilføjer time- og minutrækken til kalenderen og skifter det gemte format fra Y-m-d til Y-m-d H:i.
• Minutforhøjelse: hvor langt minutterne bevæger sig med hvert klik på pilene. Standarden er 1. Med 15 går pilene gennem :00, :15, :30 og :45.
• Standardværdi: datoen en ny kopi af widgetten starter med.

Boksen Standardværdi åbner den samme kalender, så du vælger startdatoen i stedet for at skrive den. Tidsrækken vises også her, når Aktiver tid er slået til.

For en nedtælling skal du vælge en standarddato i fremtiden. En ny widget tæller derefter ned med det samme i stedet for at vise nuller.

Fælles indstillinger #

• Vis etiket skjuler eller viser etiketten i panelet.
• Etiketblok sætter etiketten på sin egen linje over indgangen. Slå den til, hvis din etiket er lang.
• Betingelser viser kun feltet, når et andet kontrolelement har en bestemt værdi, for eksempel en “Vis nedtælling”-switcher. Se Betingelser.
• Separator tegner en skillelinje før eller efter kontrollen.

Responsiv kontrol, dynamisk support, frontend tilgængelig, kontrolklasser og vælger vises på hvert felt. Du behøver ikke nogen af dem til opsætningen i denne vejledning, og vælgeren kan forblive tom, fordi en datovælger ikke skriver CSS.

Plukkeren har ingen muligheder for et ur, der kun er tid eller for at blokere fortidige datoer. Redaktører kan vælge en hvilken som helst dag.

Brug datoen i din skabelon #

Udskriv tokenet, hvor datoen skal vises. I widgetten Event Countdown sætter HTML datoen i en tekstlinje og i en data-deadline attribut, som scriptet lyder:

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

The {% if event_date %} tjek sager. Hvis en editor rydder inputtet, udskriver tokenet intet. Standardværdien bruges ikke igen, og uden kontrollen ville nedtællingen vise NaN.

Opbyg en nedtælling i JS-panelet #

JS-panelet kører dette script. Det finder hver nedtælling, forvandler den gemte tekst til en dato og opdaterer tallene hvert 30. sekund:

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") turns 2026-10-24 19:30 ind 2026-10-24T19:30, et format hver browser læser på samme måde.
• isNaN(deadline) stopper scriptet, når datoen er tom eller ikke kan læses.
• Læsning af værdien fra en dataattribut holder hver widget på siden tælle ned til sin egen dato.

Poletter virker også direkte i JS panelet. I vores tests, var deadline = "{{ event_date }}"; udskrevet den gemte dato. Hold citaterne, fordi en nøgen dato ikke er gyldig JavaScript.

Den gemte værdi har ingen tidszone. Browseren læser det som den besøgendes lokale tid, så en nedtælling til 19:30 slutter kl. 19:30 i London og igen kl. 19:30 i New York. For et verdensomspændende øjeblik skal du føje en forskydning til strengen, før du parser, for eksempel 2026-10-24T19:30:00+00:00.

Brug kontrolelementet Datotid i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Feltet sidder på Content faneblad under din etiket. Klik på input for at åbne kalenderen, vælg en dag, og indstil derefter time og minutter i rækken nedenfor. Forhåndsvisningen opdateres, så snart du vælger.

Månedsnavnet har en dropdown, og året er en nummerboks, så at flytte måneder frem tager ikke mange klik.

Almindelige brugstilfælde #

• Nedtællinger for lanceringer, salg og webinarer.
• Eventkort, der viser datoen ud for titel og spillested.
• Tilbyd bannere, som et script skjuler, når deadline er overskredet.
• Åbnings- eller lukketider udskrevet i en tidsplan-widget.

Tips til at arbejde med feltet Datotid #

• Beslut dig for Aktiver tid, før redaktører bruger widgetten. Formatet ændres kun for datoer, der vælges, efter du har skiftet det. En værdi, der er gemt som 2026-10-24 19:30 holder sin tid, selv efter du har slået Aktiver tid fra.
• Håndter altid en tom værdi. Pak markeringen ind {% if %} og tjek for en ugyldig dato i scriptet.
• Planlæg datoer i fortiden. Eksemplet stopper ved nul. Du kunne også skjule widget eller vise en “Denne begivenhed er afsluttet” besked.
• Brug en minutstigning på 5, 15 eller 30 til arrangementer, der starter på timen eller en halv time.
• Skriv en klar Beskrivelse. Sig, om datoen er starten, slutningen eller deadline, så redaktører vælger den rigtige.

Ofte stillede spørgsmål #

Indpakning #

Føj feltet Datotid til en sektion med indhold, vælg, om den har brug for en tid, og udskriv {{ event_date }} i din HTML eller læs den i JS-panelet. Kontroller for tomme værdier, og widget'en holder, når en editor rydder datoen. Par den med Switcher field at lade redaktører skjule nedtællingen, og se prissætning for hvad hver plan indeholder.