Dato Tid

The Dato Tidsfelt giver en brugerdefineret widget en ordentlig kalendervælger i stedet for en fritekstdatoboks. Redaktører klikker på feltet i Elementor, en Flatpickr-kalender åbnes, og de vælger en dato (og eventuelt et tidspunkt) uden nogensinde at bekymre sig om at skrive det format, din widget forventer. Inde i Master Addons Widget Builder, at konsistens er hele pointen: værdien ankommer altid i et forudsigeligt format, din skabelon og script kan stole på.

Feltet Datotid understøtter Betingelser som enhver kontrol, og dens værdi udskrives gennem Twig-syntaks skabelon motor, så du kan sammenligne det eller pakke det ind {% if %} blokke i din skabelon. Begge guider dækker opsætning og begrænsninger.

Feltet forbindes gennem et token som hvert enkelt værdifelt. Udskriv {{ event_date }} i HTML-panelet for at vise datoen, eller aflever den til JS-panelet, hvor en nedtælling, en åbningstidskontrol eller et planlægningsscript kan analysere den.

Hvad feltet Datotid gør #

• Gengiver en klik-for-at-åbne kalendervælger (Flatpickr) i widgettens Elementor-panel.
• Indeholder eventuelt en tidsvælger ved siden af kalenderen.
• Gemmer valget som en formateret streng, normaliseret til Y-m-d H:i med tiden aktiveret eller Y-m-d uden den.
• Udskriver den streng hvor som helst i HTML-, CSS- eller JS-panelet igennem {{ your_field_name }}.
• Feeds JavaScript direkte, den sædvanlige rute for nedtælling og planlægning widgets.

Hvis brugerdefinerede widgets er nyt territorium, skal Widget Builder oversigt er det bedre udgangspunkt; denne side antager, at du kender din vej rundt i editoren.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er en begivenhed nedtælling widget med en Dato Tid felt navngivet event_date at widgettens script tæller ned til.

Sådan tilføjes et felt Datotid #

Træk Dato Tid felt fra panelet felter til en sektion under Content fane. Dens muligheder åbnes til venstre, når den lander.

Dato Tid feltindstillinger forklaret #

• Etiket: teksten vist ved siden af vælgeren i Elementor, for eksempel “Begivenhedsdato”.
• Navn: den unikke identifikator, dine skabeloner henviser til. Kun bogstaver, tal og understregninger, f.eks event_date.
• Standard: startdatostrengen, som widgetten leveres med.
• Aktiver tid: tilføjer en time og minut vælger til kalenderen. Med den tændt, værdier kommer ud som Y-m-d H:i (som 2026-12-31 18:00); med det af, som en slette Y-m-d date.
• Minutforhøjelse: det trin, minutvælgeren flytter ind, så editorer kan begrænses til 5, 15 eller 30 minutters slots.
• Beskrivelse, Vis etiket, Separator: standardvisningsindstillingerne plus Betingelser for kun at vise feltet, når et andet kontrolelement har en bestemt værdi.

Under motorhjelmen accepterer plukkeren en picker_options objekt med yderligere Flatpickr-indstillinger, herunder noCalendar for en tid-kun plukker, dateFormat, time_24hr, og minDate/maxDate grænser. Builder-brugergrænsefladen beholder de almindelige, Aktiver tid og minutforøgelse, for og center, og kørselstiden normaliserer lagrede værdier til de to formater ovenfor på begge måder.

Forbind feltet Datotid med dets token #

Feltet Datotid er et tokenfelt. Visning af datoen er ét token i HTML-panelet:

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

Den mere almindelige ledningsføring er JS-panelet. Fordi værdien er en stabil Y-m-d H:i string, JavaScript kan parse det og drive en nedtælling:

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

En ting, der er værd at vide før en international lancering: den analyserede dato har ingen tidszone tilknyttet, så new Date() fortolker det i hver besøgendes lokale tid. En nedtælling til “18:00” slutter kl. 18:00 i Berlin og igen kl. 18:00 i New York. For en enkelt global deadline skal du tilføje en eksplicit offset som +00:00 til strengen før parsing.

Pas på: tokenet udskriver en almindelig streng, så citer den i JavaScript. var deadline = "{{ event_date }}"; virker; uden citaterne er den gengivne værdi en syntaksfejl. Og da formatet er rettet af indstillingen Aktiver tid, skal du beslutte på forhånd, om dit script forventer 2026-12-31 eller 2026-12-31 18:00, så hold vippen i overensstemmelse med den.

Brug kontrolelementet Datotid i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor, eller genindlæs editoren, hvis siden allerede var åben. Feltet vises som et tekst-stil input under din etiket; ved at klikke på det åbnes kalender popover.

Vælg en dag, og med Aktiver tid på, indstil time og minutter under kalenderen. Indgangen fyldes med den formaterede værdi og forhåndsvisningsopdateringerne. Redaktører skriver aldrig datoen i hånden, så det format, dit script analyserer, er altid det format, der ankommer.

Almindelige brugstilfælde #

• Nedtællingswidgets til lanceringer, salg og begivenheder, hvor JS-panelet regner ud.
• Eventkort der udskriver en formateret dato ud for et sted og en titel.
• Begrænsede tilbudsbannere at et manuskript skjuler sig, når deadline er overskredet.
• Booking og tidsplan displays hvor åbnings- eller lukketider fodrer markeringen.
• “Udgivet på” stil metadata til brugerdefinerede indholdswidgets.

Tips til at arbejde med feltet Datotid #

• Match Aktiver tid til jobbet. En nedtælling har brug for tidskomponenten; en “offentliggjort på” linje gør det ikke. Det gemte format følger skiftet.
• Citer tokenet i JS. Værdien er en streng, og ikke-citerede datoer bryder scriptet i det øjeblik, det gengives.
• Normaliser før parsing. Udskiftning af pladsen med T, som i nedtællingseksemplet, holder new Date() parsing konsekvent på tværs af browsere.
• Indstil en standard i fremtiden for nedtællingswidgets, så et frisk fald tæller ned i stedet for at vise nuller.
• Brug Minute Increment til at reducere støj. Femten minutters trin er nemmere at vælge og læse end vilkårlige minutter.
• Håndter fortiden. Beslut i scriptet, hvad der sker, når deadline er overskredet: skjul widgetten, vis en besked, eller stop ved nul.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Date Time tager datoindgang ud af redaktørernes hænder og lægger en forudsigelig streng i din: en vælger i panelet, et token i skabelonen og formater, som scripts kan parse uden defensiv kode. Par det med Switcher field at skifte udløbstilstandsadfærd eller Nummerfelt for afstembare opdateringsintervaller. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.