HTML: Datum & Uhrzeit anzeigen – So gehts!

Dieses Element ermöglicht die direkte Anzeige von Datum und Uhrzeit ohne JavaScript. Du kannst verschiedene Attribute verwenden, um die Darstellung zu formatieren:

So zeigst du das aktuelle Datum und die Uhrzeit in HTML an:

Mit dem HTML-Element date:

• value: Legt das Datum fest, das angezeigt werden soll (z.B. value="2024-06-07").
• min: Definiert das früheste Datum, das ausgewählt werden kann.
• max: Definiert das späteste Datum, das ausgewählt werden kann.

Beispiel:

<label for="geburtstag">Geburtstag:</label>
<input type="date" id="geburtstag" name="geburtstag" value="2024-06-07">

Ergebnis

Das HTML-Element time:

Dieses Element dient speziell zur Anzeige der Uhrzeit. Auch hier stehen verschiedene Attribute zur Verfügung:

• value: Legt die Uhrzeit fest, die angezeigt werden soll (z.B. value="10:12:00").
• min: Definiert die früheste Uhrzeit, die ausgewählt werden kann.
• max: Definiert die späteste Uhrzeit, die ausgewählt werden kann.

Beispiel:

<label for="uhrzeit">Uhrzeit:</label>
<input type="time" id="uhrzeit" name="uhrzeit" value="10:12:00">

Mit JavaScript:

Du kannst JavaScript verwenden, um das aktuelle Datum und die Uhrzeit dynamisch zu generieren und in einem HTML-Element anzuzeigen. Dies bietet mehr Flexibilität bei der Formatierung.

Beispiel:

<div id="datum-uhrzeit"></div>

<script>
  // Funktion zum Abrufen des aktuellen Datums und der Uhrzeit
  function getAktuellesDatumUhrzeit() {
    var datum = new Date();
    var jahr = datum.getFullYear();
    var monat = datum.getMonth() + 1; // Monat 0-indiziert, daher + 1
    var tag = datum.getDate();
    var stunden = datum.getHours();
    var minuten = datum.getMinutes();
    var sekunden = datum.getSeconds();

    // Formatiere Datum und Uhrzeit als String
    var datumUhrzeit = jahr + "-" + monat + "-" + tag + " " + 
                      stunden + ":" + minuten + ":" + sekunden;
    return datumUhrzeit;
  }

  // Hole das aktuelle Datum und die Uhrzeit
  var aktuellesDatumUhrzeit = getAktuellesDatumUhrzeit();

  // Füge das Datum und die Uhrzeit in das HTML-Element ein
  document.getElementById("datum-uhrzeit").innerHTML = aktuellesDatumUhrzeit;
</script>

Verwende eine externen Bibliothek:

Es gibt verschiedene JavaScript-Bibliotheken, die die Anzeige von Datum und Uhrzeit vereinfachen können, z.B. Moment.js oder DateFns. Diese Bibliotheken bieten oft zusätzliche Funktionen wie die Formatierung nach verschiedenen Datumsformaten oder die relative Zeitangabe (z.B. „vor 5 Minuten“).

Beispiel mit Moment.js:

<div id="datum-uhrzeit"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<script>
  // Hole das aktuelle Datum und die Uhrzeit
  var aktuellesDatum = moment();

  // Formatiere Datum und Uhrzeit als String
  var datumUhrzeit = aktuellesDatum.format("YYYY-MM-DD HH:mm:ss");

  // Füge das Datum und die Uhrzeit in das HTML-Element ein
  document.getElementById("datum-uhrzeit").innerHTML = datumUhrzeit;
</script>

Zusätzliche Infos

• Du kannst CSS verwenden, um das Aussehen von Datum und Uhrzeit anzupassen (z.B. Schriftart, Farbe, Größe).
• Achte auf die Barrierefreiheit und stelle sicher, dass Datum und Uhrzeit auch für Benutzer mit Sehbehinderungen zugänglich sind.
• Bei der Verwendung von JavaScript achte auf die Kompatibilität mit verschiedenen Browsern und Geräten.

Über mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite