HTMLModElement.dateTime — Eigenschaft · JavaScript-Referenz

Signatur

HTMLModElement.dateTime

Beschreibung

Die Eigenschaft dateTime des Interfaces HTMLModElement spiegelt das HTML-Attribut datetime der Elemente <ins> (eingefügter Text) und <del> (gelöschter Text). Sie enthält einen String mit einem maschinenlesbaren Datum und optional einer Uhrzeit, der angibt, wann die Änderung am Dokument vorgenommen wurde.

Gültige Werte folgen der HTML-Syntax für „gültige Datums-Strings mit optionaler Uhrzeit“, z. B. 2024-05-17, 2024-05-17T14:30, 2024-05-17T14:30:00Z oder 2024-05-17T14:30:00+02:00. Nützlich ist das vor allem für Änderungsprotokolle, Revisionsansichten, Wiki-Diffs oder juristische Dokumente, in denen man nachvollziehen will, wann ein Abschnitt geändert wurde.

Die Eigenschaft ist ein reines String-Spiegelattribut: Der Browser prüft oder normalisiert den Wert nicht. Fehlt das Attribut, wird ein leerer String "" zurückgegeben. Zum Auswerten wandelt man den Wert selbst in ein Date-Objekt um.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des datetime-Attributs oder ein leerer String, wenn das Attribut nicht gesetzt ist. Beim Zuweisen wird der String unverändert als Attribut übernommen.

Beispiele

Änderungszeitpunkt auslesen

// HTML: <del id="alt" datetime="2024-05-17T14:30:00Z">19,99 €</del>
const del = document.getElementById('alt');
console.log(del.dateTime);

const datum = new Date(del.dateTime);
console.log(datum.toLocaleString('de-DE', { timeZone: 'Europe/Berlin' }));

2024-05-17T14:30:00Z 17.5.2024, 16:30:00

Eingefügten Text mit aktuellem Zeitstempel erzeugen

const ins = document.createElement('ins');
ins.textContent = 'Neuer Preis: 14,99 €';
ins.dateTime = new Date().toISOString();
document.querySelector('#preis').append(ins);

console.log(ins.outerHTML);

<ins datetime="2024-05-17T12:00:00.000Z">Neuer Preis: 14,99 €</ins>

Änderungsprotokoll aus allen ins/del-Elementen

const aenderungen = [...document.querySelectorAll('ins, del')]
  .filter((el) => el.dateTime !== '')
  .map((el) => ({
    typ: el.tagName === 'INS' ? 'eingefügt' : 'gelöscht',
    text: el.textContent.trim(),
    zeit: new Date(el.dateTime)
  }))
  .sort((a, b) => a.zeit - b.zeit);

aenderungen.forEach(({ typ, text, zeit }) =>
  console.log(`${zeit.toLocaleDateString('de-DE')}: ${typ} – ${text}`)
);

17.5.2024: gelöscht – 19,99 € 17.5.2024: eingefügt – Neuer Preis: 14,99 €

// Wichtig · Fallstricke

Groß-/Kleinschreibung: Die Eigenschaft heißt dateTime (großes T), das HTML-Attribut dagegen datetime. el.datetime ergibt undefined.
Keine Validierung: Ungültige Werte wie "gestern" werden ohne Fehler übernommen. new Date(el.dateTime) liefert dann Invalid Date. Mit Number.isNaN(datum.getTime()) prüfen.
Zeitzonen: Ohne Zeitzonen-Angabe interpretiert Date Datum-mit-Uhrzeit als lokale Zeit, ein reines Datum (2024-05-17) dagegen als UTC. Für eindeutige Werte lieber toISOString() (UTC mit Z) verwenden.
Der Wert wird nicht sichtbar dargestellt, Screenreader lesen ihn in der Regel nicht vor. Wenn Nutzer den Zeitpunkt sehen sollen, zusätzlich title oder sichtbaren Text angeben.
Wird in allen modernen Browsern unterstützt (auch sehr alten, IE eingeschlossen).

Siehe auch

Date HTMLLinkElement.imageSizes HTMLModElement.cite HTMLTimeElement.dateTime HTMLMapElement.name