Web-Toolbox HTML JavaScript CSS

JavaScript Datum

Arbeiten mit dem Date-Objekt date() in JavaScript - Grundlagen

Oft muss in Programmen mit einem Datum bzw. mit Zeiten gearbeitet werden. Dazu bietet JavaScript das Datums-Objekt (Date-Object) mit vielen, mächtigen Funktionen. Bei der Arbeit mit dem Date-Objekt müssen einige Besonderheiten beachtet werden. So ist der Ausdruck "23.11.2022" nicht automatisch ein Datum, sondern ein Text. Um diesen 'String' "23.11.2022" in einer Datumsfunktion zu verwenden, muss er in ein Datums-Objekt umgewandelt werden.

Rubrik Datum

Im Date()-Objekt sind Datums- und Zeit-Informationen enthalten

  1. Datumsinformationen werden im Objekt Date() bereitgehalten
  2. Grundsätzlich handelt es sich dabei um einen Counter
  3. Start des Zählvorgangs ist der 01.01.1970, 0:00:00 Uhr UTC (Deutschland = Universal Time + 1 Stunde)
  4. Gezählt wird also in Millisekunden seit dem Startdatum 01.01.1970
Das Objekt Date() 'gehört' dem System! Deshalb lassen wir auch die Finger davon und versuchen es nicht zu beeinflussen / zu ändern. Auslesen ist OK. Will man auf ein Datumsobjekt Einfluss nehmen, muss man schon eine eigene Kopie herstellen. Diese Kopie gehört uns! Damit dürfen wir arbeiten.

const Datum = new Date();
Der Datums-Zeit-Wert ist also ein Wert in Millisekunden, gezählt seit dem 1. Januar 1970. Bis zum Laden dieser Seite sind seitdem genau xxx Millisekunden vergangen. Jeder Datums- und Zeitwert wird auf dieser Basis kalkuliert.

Die Berechnung einer Zeitspanne als Beispiel:
Abstand vom 01. Januar 2022 bis jetzt
01.01.1970  bis  jetzt01.01.1970  bis  01.01.2022Differenz

Nun kennt man den zeitlichen Abstand zwischen diesen beiden Zeitstempeln in Millisekunden. Wenn man das Ergebnis (xxx) in Tage umrechnen möchte, dividiert man diesen Wert durch 86 400 000.
Dieser Umrechnungsfaktor entspricht den Millisekunden pro Tag.
Das Ergebnis ist xxx Tage. Gerundet sind das etwa xxx Tage.

So muss man auch beim Einsatz von JavaScript verfahren! Möchte man den Abstand in Tagen zwischen zwei Zeitstempeln errechnen, ermittelt man zunächst die beiden Datumswerte und lässt durch JavaScript die Differenz berechnen. Das Ergebnis in Millisekunden kann dann noch in Tage (86 400 000 ms/Tag) gewandelt und zur Anzeige hübsch formatiert werden.

Das JavaScript Date Object enthielt beim Laden der Seite folgende Informationen:


Aus dem Date-Objekt kann man Datums- und Zeit-Informationen ermitteln. Dazu stehen in JavaScript unter anderem folgende Methoden zur Verfügung:


JavaScript-Code-Schnipsel für dieses Modul


Für Web-Worker und Scriptschreiber: Mit JavaScript haben Sie Einfluss auf das im Browserfenster angezeigte HTML-Dokument und die Möglichkeit, auf Benutzeraktionen zu reagieren. Inhalte können abgefragt und die Darstellung der Seite kann verändert werden. Einige der in diesem Beispiel verwendeten Techniken zeige ich unten auf. Im Quelltext der Seite können sie den gesamten Zusammenhang erkennen.

Methoden
Datums- und Zeit-Informationen ermitteln
// Jahreswert vierstellig extrahieren
const Datum = new Date();
let year = Datum.getFullYear();
// Monatswert extrahieren [0 - 11]
const Datum = new Date();
let month = Datum.getMonth() + 1;
// Tageswert extrahieren
const Datum = new Date();
let day = Datum.getDate();
// Stundenwert extrahieren
const Datum = new Date();
let hour = Datum.getHours();
// Menutenwert extrahieren
const Datum = new Date();
let minutes = Datum.getMinutes();
// Sekundenwert extrahieren
const Datum = new Date();
let seconds = Datum.getSeconds();
Auf weiteren Seiten in der Rubrik Datum möchte ich demnächst an Beispielen erklären, wie häufig eingesetzte Rechenoperationen mit dem Date()-Objekt in JavaScript gelöst werden. Interessant sind auch die Erweiterungen in JavaScript. Seit einigen Jahren stehen neue Möglichkeiten zum Extrahieren von Informationen und zur Darstellung von Datumsformaten zur Verfügung, die den internationalen, aber für uns wichtig, der deutschen Schreibweise des Datums entsprechen.

Beispiel: Deutsches Datumsformat mit Wochentag, Monatsnamen und 4-stelligem Jahr
xxx
// lokales Datumsformat DE
const Datum = new Date();
let DatumDeutsch = Datum.toLocaleString('de-DE', Optionen );

// eingetragene Optionen:
// weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'

Beispiel: US-Datumsformat mit Darstellung der Uhrzeit
xxx
// lokales Datumsformat US
const Datum = new Date();
let DatumDeutsch = Datum.toLocaleString('en-US', Optionen );

// eingetragene Option:
// hour12: 'false'

Unten angekommen!

Sie sind unten angekommen aber wahrscheinlich nicht dorthin, wo Ihr eigentliches Ziel war.

  Kaffeepause
  Impressum
  Datenschutz
  Webmaster

Lesenswert

Das könnte Sie auch interessieren. Verweise auf Seiten zu ähnlichen Themen in dieser Unterrubrik.

  nach oben
  vorherige Seite
  nächste Seite
  Home

Keywords

Datum Date() Berechnung getMinutes() getSeconds() Wochentag Date()-Objekt Zeit Datumswert UTC Clock zeitverzögert setTimeout() CSS-Klassen JavaScript getFullYear() getMonth() getDate() getHours() toLocaleString