Datum und Uhrzeit in JavaScript

Da die Datumsfunktionen von JavaScript sehr umfangreich sind, lohnt es sich hier genauer hin zu schauen. Im Folgenden wollen wir Ihnen einige Beispiele zeigen wie mit JavaScript und Daten sinnvoll umgegangen werden kann.

Das Date-Objekt allgemein

Soll mit dem Datum oder der Zeit gearbeitet werden, ist das Date-Objekt unweigerlich ein Begleiter, Es ermöglicht den Zugriff auf Methoden die zur Angabe und Verarbeitung von Zeit und Datum bzw. zeitlichen Abständen nützlich sind.

Date-Objekt erstellen

Ein neues Date-Objekt wird mit dem Aufruf new Date() erzeugt. Dies sollte einer Variablen zur Verarbeitung übergeben werden. Beispiel:

a = new Date();

Zusätzlich ist das übergeben von Parametern möglich. Folgende können verwendet werden:

Millisekunden - Mit der Angabe von Millisekunden wird ein Date-Objekt mit dem Datum erstellt, dass die Anzahl an Millisekunden ab dem 01.Jan.1970 00:00:00 Uhr hat. Eine Sekunde später wäre beispielsweise der Wert 1000 und 1 Jahr später, wäre der Wert 1000*60*60*24*365 (Millisekunde*Sekunde*Minute*Tag*Jahr).
String - Mit der Angabe eines Strings als Parameter, wird ein Date-Objekt erstellt, welches die aus dem String extrahierten Werte enthält. Dazu ist es notwendig, das der String im richtigen Format übergeben wird. Als Beispiel: 'Mon Jun 18 15:11:39 UTC+0200 2001' bedeutet: Montag der 18.07.2001 15 Uhr 11 Minuten 39 Sekunden +2 Stunden nach UTC (~ Zeitzone).
Jahr, Monat, Datum [+ x] - Mit der Angabe der drei Parameter Jahr, Monat, Datum wird ein Date-Objekt mit dem definierten Jahr, Monat und Datum sowie der Zeit 00:00:00 erstellt. Optional kann diese Kette noch durch die Werte Stunden, Minuten, Sekunden und Millisekunden (in dieser Reihenfolge) erweitert werden. Dabei ist jeweils zu beachten, dass der Januar den Wert 0 (Null) hat, der Februar den Wert 1 (usw.).

Beispiel:

a = new Date((1000*60*60*24*365*30)+(1000*60*60*24*7));
//30 Jahre + 7 Tage (Schaltjahre) = Sat Jan 1 01:00:00 UTC+0100 2000

b = new Date('Jul 15 01:30:00 2001');
// = Sun Jul 15 01:30:00 UTC+0200 2001

c = new Date(2001, 11, 24);
// = Mon Dec 24 00:00:00 UTC+0100 2001

d = new Date(2001, 11, 24, 18, 19);
// = Mon Dec 24 18:19:00 UTC+0100 2001

Lokalzeit

Unter dem Wort Lokalzeit versteht sich nicht etwa ein zeitlicher Abschnitt, der besonders geeignet ist um die nächste Bar/Restaurant aufzusuchen. Bei Lokalzeit ist hier im Zusammenhang mit dem Date-Objekt die Zeit gemeint, die auf dem Computer eingestellt ist, auf dem das Skript ausgeführt wird. Dabei spielt ins Besondere die Zeitverschiebung eine größere Rolle.
Die meisten Methoden rechnen nach Lokalzeit, die Methoden die nicht danach rechnen sind mit UTC im Namen gekennzeichnet.

Die Uhrzeit anzeigen

Für sämtliche Spielereien mit Datum und Zeit ist immer das date-Objekt nötig - so auch, wenn die aktuelle Uhrzeit angezeigt werden soll. Das date-Objekt besitzt zur Ausgabe, der einzelnen Werte wie Stunden, Minuten oder Sekunden jeweils eine eigene Methode, die wir hier verwenden können. Das folgende Skript schreibt die aktuelle Uhrzeit in die Variable zeit:

a = new Date();
b = a.getHours();
c = a.getMinutes();
d = a.getSeconds();
zeit = b+':'+c+':'+d;

Haben wir die Zeit erstmal, kann sie überall hin ausgegeben werden, zum Beispiel in der Statusleiste:

<html><head>
<title>Uhrzeit</title>
<script type="text/javascript">

</script>
</head>
<body onload="window.setInterval('ausgabe()',1000)">
...
</body>
</html>

Mit dem onload-Ereignis wird hierbei ein Intervall erzeugt, dass jede Sekunde die Funktion ausgabe erneut aufruft und damit das Erneuern der Uhrzeit vorantreibt.

Verweildauer anzeigen

Das obige Beispiel zeigt lediglich die aktuelle Zeit an. Was aber, wenn die Verweildauer auf einer Seite angezeigt werden soll? Auch hierfür wird das date-Objekt benötigt - und zwar gleich zweimal. Das System ist folgendes: Betritt der Besucher eine Seite, wird die Zeit des Eintritts gespeichert. Innerhalb eines Intervalls wird dann die aktuelle Zeit mit der Eintrittszeit verglichen und die Differenz errechnet. Das errechnet Ergebnis kann schließlich ausgegeben werden.
Um die Eintrittszeit zu speichern reicht es beim Laden der Seite eine date-Variable zu erstellen:

var eintritt = new Date();

Die Differenz kann wie folgt berechnet werden:

Nun fehlt nur noch ein Intervall, um die Anzeige ständig aufzurufen:

Alter berechnen

Eine oftmals sehr interessante Anwendung ist die Berechnung des exakten Alters (inklusive Monaten, Tagen, Stunden und Minuten). Die Berechnung erfolgt, wie im obigen Beispiel anhand des Vergleichs zweier Daten: Dem Geburtsdatum und dem aktuellen Datum und Zeit. Als erste Voraussetzung wird dazu also eine Eingabemöglichkeit für das Geburtsdatum benötigt. Wir nehmen dazu ein Formular mit folgenden Eingabefeldern: Jahr, Monat, Tag, Stunden, Minuten sowie einem OK-Button. Das Formular ergibt sich so:

<form name="form1" onsubmit="berechne()">
Tag.Monat.Jahr:
<input size="3" type="Text" name="tag" value="01">.
<input size="3" type="Text" name="monat" value="01">.
<input size="5" type="Text" name="jahr" value="2001"><br>

Stunden.Minuten:
<input size="3" type="Text" name="stunden" value="01">:
<input size="3" type="Text" name="minuten" value="00"><br>

<input type="Submit" value="Ok">
</form>

Bitte beachten Sie, dass das Formular, wie auch alle Felder eindeutig benannt sind, damit der Zugriff fehlerfrei gewährleistet ist. Das folgende Skript erstellt aus den gegebenen Daten ein Datum:

Das ganze kommt dann in den head-Bereich der Seite. Allerdings sollten Sie beachten, dass das obige Skript nicht zu 100% korrekt ist: Ein Monat wird mit 30 Tagen gezählt - unter Umständen fehlen also einige Tage. Auch Schaltjahre sind nicht mit inbegriffen.

Timeouts und Intervalle

Recht praktisch bei Dingen die nacheinander zeitgesteuert ablaufen sollen sind Intervalle und Timeouts. Ein Intervall ist ein immer wiederkehrendes Ereignis in zeitlich gleichen Abständen. Ein Timeout ist sozusagen ein Teil eines Intervalls - das Ereignis tritt nur einmal ein nachdem es gestartet wurde, dann nicht wieder. Für beides bietet das window-Objekt die entsprechenden Funktionen: setTimeout um ein Timeout zu erstellen und setInterval (mit einem "L") um ein Intervall zu erstellen. Beide Funktionen erwarten als ersten Parameter einen String der einen Funktionsaufruf beschreibt, also z.B. 'machwas(1,2,3)'. Als zweiter Parameter wird jeweils die Anzahl der Millisekunden erwartet nach denen das Ereignis eintreten soll: 1000 Millisekunden sind eine Sekunde, 60000 Millisekunden sind eine Minute usw. Ein Beispiel:

<html><head>
<script type="text/javascript">

</script>
</head>
<body >
  <a onclick="sTime()" href="#">Timout</a><br>
  <a onclick="sInt()" href="#">Intervall starten</a><br>
  <a onclick="bInt()" href="#">Intervall beenden</a><br>
</body>
</html>

Im Beispiel sind drei Funktionen definiert, die jeweils mit einem Link verknüpft sind. Die Funktion sTime startet ein Timeout, der nach einer Sekunde abläuft. Entsprechend wird also nach einer Sekunde die Nachricht '1 Sek. vorbei' angezeigt. Die Funktion sInt startet ein Intervall, das im Abstand von 10 Sekunden auftritt und die Meldung '10 Sek. vorbei' anzeigt. Da es sich um ein immer wiederkehrendes Ereignis handelt, muss es irgendwie abbrechbar sein. Dazu gibt die Methode einen Code (meist eine eindeutige Zahl) aus die das Intervall definiert. Die dritte Funktion, bInt, beendet das Intervall durch die clearInterval-Methode des window-Objekts. Ihr wird der zuvor von der setInterval ausgegebene Wert übergeben.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project