Javascript Date and Time (new Date)

Javascript Date-Objekt

Javascript hat nicht so viele eingebaute Objekte wie andere Programmier- und Scriptsprachen. Aber Zeit und Datum sind unverzichtbar für Webseiten und Apps. Laut ECMAScript muss das Date-Objekt jedes Datum und jede Zeit innerhalb von 100 Millionen Tagen vor und nach dem 1.1.1970 umsetzen. Das sind 273 785 Jahre vor 1970 und 273 785 Jahre nach 1970. Das Javascript Date-Object reicht also noch bis in das Jahr 275755.

const heute = new Date(); 				// aktuelles Datum und aktuelle Lokalzeit
const utc = new Date().toUTCString();
	

Ein beliebiges Datum wird angelegt mit

let ng = new Date(2364,0,1).toLocaleString();

Wenn die Sekunden eine Rolle spielen, kann das Datum bis auf die Millisekunde angegeben werden:

                   Jahr Monat    Minute
                     |   |          |   Sekunden
                     ▼   ▼          ▼   ▼
let nge = new Date(2021, 02, 24, 9, 26, 15, 18).toLocaleString();
                             ▲   ▲          ▲     
                             |   |          |
                            Tag  Stunde   Millisekunden

toLocaleString () ohne Argument hängt ab von der Implementierung, kann aber auch die Zeitzone als Argument übermitteln: console.log(date.toLocaleString('en-US'))

getDay, getMonth, getFullYear: Datum formatieren

heute.getMonth();     // liefert 0 - 11
heute.getFullYear();  // YYYY (startet nicht bei 0)
heute.getDate();      // liefert 1 - 31
heute.getDay();       // Tag der Woche (startet am Sonntag mit 0)
heute.getHours();     // liefert 0 - 23
heute.getMinutes();   // liefert 0 - 59
heute.getTime();      // Millisekunden seit 1.1.1970

heute.getYear() gibt es zwar auch noch, aber getYear() ist »deprecated«. D.h. der Ausdruck getYear() soll nicht mehr benutzt, sondern durch getFullYear() ersetzt werden.

Ups – aber warum hinkt der Monat beim Javascript-Datum um einen Monat hinterher? Tut er nicht. Der Monat wird von 0 gezählt. Dezember ist also 11.

getTimezoneOffset – Zeitzone und Winter-/Sommerzeit

Javascript kennt nur die lokale Zeitzone und UTC. toLocaleString() konvertiert das Datum entsprechend den örtlichen Konventionen zur Darstellung von Datum und Zeit. getTimezoneOffset() gibt die Zeitzonen-Abweichung gegenüber Greenwich Mean Time (GMT) relativ zur lokalen Zeit in Minuten an.

gmt.innerHTML = Date.parse(new Date());
offset.innerHTML = new Date().getTimezoneOffset();

Greenwich Mean Time 
Zeitzonen-Offset 
Ortszeit 

weekday, month und year: short / long

Wochentag ausgeschrieben als Montag, …, Sonntag oder in Kurzform Mo, … ,So
Monat ausgeschrieben als Januar, … ,Dezember oder in Kurzform Jan, … ,Dez

let weekday = new Date().toLocaleString('de-de', {  weekday: 'long' });
Wochentag lang 
let weekday = new Date().toLocaleString('de-de', {  weekday: 'short' });
Wochentag kurz 

let monthL = new Date().toLocaleString('de-de', {  month: 'long' });
Monat lang 
let monthS = new Date().toLocaleString('de-de', {  month: 'short' });
Monat kurz 

let year = new Date().toLocaleString('de-de', {  year: 'numeric' });
Jahr 4 Zeichen 
let yearS = new Date().toLocaleString('de-de', {  year: '2-digit' });
Jahr 2 Zeichen 

setDay, setMonth – Datum berechnen

Nehmen wir an, wir brauchen ein formatiertes Datum, z.B. heute vor 30 Tagen oder vor zwei Jahren. Das geht locker mit setDay oder setMonth.

Also: Zuerst mal das Datum von heute mit new Date() abrufen, dann einen Tag subtrahieren. Und das funktioniert selbst beim 1. eines Monats, denn Javascript ist so raffiniert, davon den letzten Tag des letzten Monats zu machen.

const heute = new Date()
const gestern = new Date(heute)

gestern.setDate(gestern.getDate() - 1)
line.innerHTML = "Heute " + heute.toISOString() + "Gestern " + gestern.toISOString();

const date = new Date(heute.setMonth(heute.getMonth() - 24)) 
line.innerHTML = "Vor zwei Jahren" + date.toISOString();

Daterange – einen Zeitraum durchlaufen

input type="date" zeigt einen Kalender und das Datum im lokalen Format: also z.B. 3.10.2022 für einen deutschen Besucher. Intern liefert das Eingabefeld:

Damit wir bei einer Folge von Tagen auch beim Wechsel zwischen Sommerzeit und Normalzeit in der Spur bleiben, ist es besser, die Zeit-Komponente (02:00:00 GMT+0200) wegzulassen.

// Gibt ein Array mit dem jeweiligen Datum zwischen zwei Tagen zurück
function getDates (startDate, endDate) {
	const dates = []
	let currentDate = startDate
	const addDays = function (days) {
		const date = new Date(this.valueOf())
		date.setDate(date.getDate() + days)
		return date;
	}
	while (currentDate <= endDate) {
		dates.push(currentDate)
		currentDate = addDays.call(currentDate, 1)
	}
  return dates;
}

Quelle: Github miguelmota/getDates.js

getFullYear(), date.getMonth() und date.getDate() extrahieren Jahr, Monat und Tag. Aufrufen also mit

const dates = getDates (
	new Date(start[0], start[1], start[2]), 
	new Date (end[0], end[1], end[2])
);

Zeit seit

Datum und Zeit brauchen wir z.B. um festzustellen, wieviel Zeit seit einem Zeitpunkt verstrichen ist oder wieviel Zeit noch bleibt: Timer mit setInterval.

Zeit seit dem ersten Release von Javascript

const startDateTime = new Date(1995,11,4,0,0,0,0); // Erstes Release von Javascript
const startStamp = startDateTime.getTime();

let newDate = new Date();
let newStamp = newDate.getTime();

let timer;

function updateClock() {
    newDate = new Date();
    newStamp = newDate.getTime();
    let diff = Math.round((newStamp-startStamp)/1000);
    
    let d = Math.floor(diff/(24*60*60));
    diff = diff-(d*24*60*60);
    let h = Math.floor(diff/(60*60));
    diff = diff-(h*60*60);
    let m = Math.floor(diff/(60));
    diff = diff-(m*60);
    let s = diff;
    
    document.getElementById("time-elapsed").innerHTML = d+" Tage, "+h+" Stunden, "+m+" Minuten, "+s+" Sekunden seit dem 4.11.1995";
}

timer = setInterval(updateClock, 1000);

Quelle auf Stackoverflow: javascript - time counter since start date and time

Datum / Zeit vergleichen

Date ist ausgesprochen hilfreich, wenn Datum und Zeit verglichen werden müssen. Würden wir wie folgt vorgeben:

let date1 = new Date (2000,0,1);
let date2 = new Date (2000,0,1);

if (date1 === date2 ) { … immer false!!!}

if (date1.getTime() === date2.getTime()) {
	1333609301900   === 1333609301900 // true !!!
}

wäre das Ergebnis der Abfrage (date1 === date2 ) immer false, weil Javascript hier die Objekte miteinander vergleicht. Stattdessen vergleicht man einfach die Millisekunden seit dem 1.1.1970, um festzustellen, ob ein Datum vor oder nach einem anderen Datum liegt.

toISOString – Datum als String – international

Einfach ISO-Format ist nicht unbedingt zuverlässig. Die Zeichenkette wird von den Browsern und ihren Version mal als UTC und manchmal als Ortszeit (local time) interpretiert. Berechnungen also am besten aus UTC durchführen, dafür das "Z" anhängen. Darstellung mit .toUTCString(), als Ortszeit mit .toString().

Die Angabe der Zeit im HTML time-Tag erfolgt als ISO-Standard ISO-8601 (YYYY-MM-DD oder YYYY-MM-DDTHH:mm:ss.sssZ) – den liefert Javascript frei Haus.

let today = new Date();
today.toISOString().substring(0, 10);
document.querySelector('#ni').innerHTML = today;

Alle moderenen Browser, IE ab Version 9.

Datum zu Woche – date to week

Eine Methode getWeek – ähnlich wie PHP date('W') – gibt es in Javascript nicht. In einer ISO-8601 Wochennummer beginnt die Woche am Montag, die erste Woche eines Jahres beginnt am ersten Donnerstag des Jahres.

Es kann also eine Überschneidung zwischen der letzten Woche eines Jahres und der ersten Woche des folgenden Jahres um bis zu drei Tagen geben.

1.1.2016, 2.1.2016 und 3.1.2016 fielen z.B. noch in Woche 53, erst der 4.1.2016 in Woche 1 des Jahres 2016. 2018 war in Hinsicht auf die Wochenzahl ein ideales Jahr: Der 1.1.2018 war ein Montag.

Date.prototype.getWeekNumber = function(){
    let d = new Date(+this);
    d.setHours(0,0,0);
    d.setDate(d.getDate()+4-(d.getDay()||7));
    return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
};

Prototyping DOM-Elemente ist allerdings nicht ganz ohne Nebenwirkungen.

Eingabe-String des Datums in ein ISO-Datum umwandeln mit einem regulären Ausdruck (RegExp-Object) für Trennzeichen wie ., - und /:

let mydate = document.querySelector('#md');
mydate.onblur = function () {
	let d = this.value;
	let seps = [' ', '\\\.', '\\\+', '-', '\\\(', '\\\)', '\\*', '/', ':', '\\\?'];
	let fields = d.split(new RegExp(seps.join('|'), 'g'));
	let mydate = new Date(fields[2],fields[1]-1,fields[0]);
	document.querySelector('.mdres').innerHTML = "Woche " + mydate.getWeekNumber();
}

Tag des Jahres

Heute ist Tag des Jahres

const heute = new Date();
const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 86_400_000);

// Tag des Jahres für ein bestimmtes Datum
dayOfYear(new Date('2024-09-28')); // 272

// Tag des Jahres heute
console.log ("heute", dayOfYear(heute));

1000 * 60 * 60 * 24 = 86400000

Der Unterstrich in 86_400_000 macht lange Zahlen lesbarer.

performance.now

Während Date.now() die Millisekunden seit dem 1. Januar 1970 zurückgibt, liefert performance.now() die Millisekunden seit einem beliebigen Zeitpunkt, wenn also die Differenz zwischen zwei Zeitpunkten gefragt ist und nicht die absolute Position der Zeit.