Datum und Uhrzeit auf Webseite anzeigen?
Hi!
Also so wie auf der Kronenzeitung möchte ich bei meiner Webseite das Datum anzeigen lassen.
Nach ein bisschen googlen habe ich das gefunden:
const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(event.toLocaleDateString('de-DE', options));
Nur bin ich ein JavaScript-Neuling und kenne mich gar nicht aus.
Also, wie kann ich das nun in meinen HTML-Code implementieren, damit diese Funktion auch in einer div angezeigt wird?
Ich habe mir im Entwicklertool das div von www.krone.at angeschaut, aber daraus werde ich nicht schlau.
LG
2 Antworten
Es geht ja schon in die richtige Richtung. Nur brauchst du natürlich das aktuelle Datum. Dazu reicht es aus, die Parameter für Date zu entfernen.
const event = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(event.toLocaleDateString('de-DE', options));
Nun soll das, was noch in der Konsole ausgegeben wird, natürlich auch in deinem div landen.
Dazu ein Beispiel-Dokument:
<!doctype html>
<title>Date example</title>
<div id="current-date"></div>
<script>
const date = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById("current-date").innerText = date.toLocaleDateString('de-DE', options);
</script>
Via getElementById hole ich mir hier erst das Element mit dem id-Attribut, welches den Wert current-date hat. Dessen inneren Textknoten befülle ich dann mit dem Datum.
Bei jedem Aufruf der Seite wird nun das aktuelle Datum angezeigt.
Aber vielleicht reicht dir das nicht und du möchtest, dass sich das Datum auch dann aktualisiert, wenn ein Nutzer länger auf der Seite verweilt, ohne die Seite einmal neu zu laden.
In dem Fall benötigst du noch einen Timer, der das Datum in regelmäßigen Abständen (eine Minute sollte ausreichen) aktualisiert.
Der Inhalt des script-Tag sollte dann so aussehen:
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const currentDateElement = document.getElementById("current-date");
function setCurrentDate() {
const date = new Date();
currentDateElement.innerText = date.toLocaleDateString('de-DE', options);
}
setCurrentDate();
setInterval(setCurrentDate, 1000 * 60);
Die setInterval-Funktion ruft alle 60 Sekunden die Funktion setCurrentDate auf, die wiederum das aktuelle Datum ermittelt und setzt.
Da sich die Optionen und das Ausgabeelement nie ändern, werden sie außerhalb des Intervalls, also zu Beginn des Skripts, definiert.
Schau mal hier
https://jsfiddle.net/4mywuznL/
Das wäre mein erster Anstaz.
Stimmt das Datum nicht die Zeit.
https://jsfiddle.net/9gwav0pu/1/
könnten man vielleicht alle paar Minuten aktualisieren.
Leider ist das nach wie vor falsch. Zum einen startet JS die Monatsangabe bei 0. Daher muss die Zahl noch mit 1 addiert werden, damit wir im Mai landen.
Zum anderen hättest du dir auch einmal den Text des Fragestellers durchlesen sollen. Er möchte ja genau so ein Format, wie es auch auf der Seite der Kronenzeitung ausgegeben wird (oder seinem Code-Snippet). Ich bin in meiner Antwort schon darauf eingegangen.
Das div-Element ist unnötig, bei dem Gleichheitszeichen nach class hast du dich vertippt. Jede Sekunde im DOM nach einem Element zu suchen, ist auch nicht günstig. Generell macht dein Lösungsvorschlag nicht das, was der Fragesteller möchte.