Alles, was Sie über Datum in JavaScript wissen müssen

Datum ist in JavaScript seltsam. Es nervt uns so sehr, dass wir Bibliotheken (wie Date-fns und Moment) sofort (ha!) greifen, wenn wir mit Datum und Uhrzeit arbeiten müssen.

Aber wir müssen nicht immer Bibliotheken verwenden. Datum kann tatsächlich recht einfach sein, wenn man weiß, worauf man achten muss. In diesem Artikel führe ich Sie durch alles, was Sie über das Date-Objekt wissen müssen.

Zuerst lassen Sie uns die Existenz von Zeitzonen anerkennen.

Zeitzonen

Es gibt Hunderte von Zeitzonen auf unserer Welt. In JavaScript interessieren uns nur zwei - Lokale Zeit und Koordinierte Weltzeit (UTC).

• Lokale Zeit bezieht sich auf die Zeitzone, in der sich Ihr Computer befindet.
• UTC ist praktisch gleichbedeutend mit der Greenwich Mean Time (GMT).

Standardmäßig liefert fast jede Datums-Methode in JavaScript (außer einer) ein Datum/eine Uhrzeit in lokaler Zeit. Sie erhalten nur UTC, wenn Sie UTC angeben.

Damit können wir über die Erstellung von Datumsangaben sprechen.

Datum erstellen

Sie können ein Datum mit new Date() erstellen. Es gibt vier mögliche Wege, new Date() zu verwenden.

1. Mit einem Datumsstring
2. Mit Datumsargumenten
3. Mit einem Zeitstempel
4. Ohne Argumente

Die Datumsstring-Methode

Bei der Datumsstring-Methode erstellen Sie ein Datum, indem Sie einen Datumsstring an new Date übergeben.

new Date('1988-03-21')

Wir neigen zur Datumsstring-Methode, wenn wir Datumsangaben schreiben. Das ist natürlich, weil wir schon unser ganzes Leben lang Datumsstrings verwenden.

Wenn ich 21-03-1988 schreibe, deduzieren Sie ohne Probleme, dass es der 21. März 1988 ist. Ja? Aber wenn Sie 21-03-1988 in JavaScript schreiben, erhalten Sie Invalid Date.

Dafür gibt es einen guten Grund.

Wir interpretieren Datumsstrings in verschiedenen Teilen der Welt unterschiedlich. Zum Beispiel ist 11-06-2019 entweder der 11. Juni 2019 oder der 6. November 2019. Aber Sie können nicht sicher sein, was ich meine, es sei denn, Sie kennen das Datumssystem, das ich verwende.

In JavaScript müssen Sie, wenn Sie einen Datumsstring verwenden möchten, ein Format verwenden, das weltweit akzeptiert wird. Eines dieser Formate ist das ISO 8601 Extended Format.

// ISO 8601 Extended format
`YYYY-MM-DDTHH:mm:ss.sssZ`

Hier bedeuten die Werte

• YYYY: 4-stellige Jahreszahl
• MM: 2-stelliger Monat (wobei Januar 01 und Dezember 12 ist)
• DD: 2-stelliger Tag (0 bis 31)
• -: Trennzeichen für das Datum
• T: Zeigt den Beginn der Zeit an
• HH: 24-stellige Stunde (0 bis 23)
• mm: Minuten (0 bis 59)
• ss: Sekunden (0 bis 59)
• sss: Millisekunden (0 bis 999)
• :: Trennzeichen für die Zeit
• Z: Wenn Z vorhanden ist, wird das Datum auf UTC gesetzt. Wenn Z nicht vorhanden ist, wird es lokale Zeit sein. (Dies gilt nur, wenn eine Zeit angegeben ist.)

Stunden, Minuten, Sekunden und Millisekunden sind optional, wenn Sie ein Datum erstellen. Wenn Sie also ein Datum für den 11. Juni 2019 erstellen möchten, können Sie dies schreiben.

new Date('2019-06-11')

Achten Sie hier besonders auf. Es gibt ein großes Problem bei der Erstellung von Daten mit Datumsstrings. Sie können das Problem erkennen, wenn Sie dieses Datum console.log.

Wenn Sie in einer Region leben, die hinter GMT liegt, erhalten Sie ein Datum, das 10. Juni anzeigt.

Wenn Sie in einer Region leben, die vor GMT liegt, erhalten Sie ein Datum, das 11. Juni anzeigt.

Das liegt daran, dass die Datumsstring-Methode ein besonderes Verhalten aufweist: Wenn Sie ein Datum erstellen (ohne Angabe der Uhrzeit), erhalten Sie ein Datum, das in UTC gesetzt ist.

Im obigen Szenario erstellen Sie, wenn Sie new Date('2019-06-11') schreiben, tatsächlich ein Datum, das 11. Juni 2019, 12 Uhr UTC anzeigt. Deshalb erhalten Personen, die in Gebieten hinter der GMT leben, einen 10. Juni anstelle eines 11. Juni.

Wenn Sie ein Datum in lokaler Zeit mit der Datumsstring-Methode erstellen möchten, müssen Sie die Uhrzeit angeben. Wenn Sie die Uhrzeit angeben, müssen Sie mindestens die HH und mm schreiben (andernfalls gibt Google Chrome ein ungültiges Datum zurück).

new Date('2019-06-11T00:00')

Die ganze Angelegenheit mit lokaler Zeit vs. UTC bei Datumsstrings kann eine mögliche Fehlerquelle sein, die schwer zu fassen ist. Daher empfehle ich Ihnen, keine Daten mit Datumsstrings zu erstellen.

(Übrigens warnt MDN vor dem Datumsstring-Ansatz, da Browser Datumsstrings unterschiedlich interpretieren können).

Wenn Sie Daten erstellen möchten, verwenden Sie Argumente oder Zeitstempel.

Datumserstellung mit Argumenten

Sie können bis zu sieben Argumente übergeben, um ein Datum/eine Uhrzeit zu erstellen.

1. Jahr: 4-stellige Jahreszahl.
2. Monat: Monat des Jahres (0-11). Der Monat ist nullindiziert. Standardwert ist 0, wenn weggelassen.
3. Tag: Tag des Monats (1-31). Standardwert ist 1, wenn weggelassen.
4. Stunde: Stunde des Tages (0-23). Standardwert ist 0, wenn weggelassen.
5. Minuten: Minuten (0-59). Standardwert ist 0, wenn weggelassen.
6. Sekunden: Sekunden (0-59). Standardwert ist 0, wenn weggelassen.
7. Millisekunden: Millisekunden (0-999). Standardwert ist 0, wenn weggelassen.

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

Viele Entwickler (mich eingeschlossen) vermeiden den Argumentenansatz, weil er kompliziert aussieht. Aber er ist eigentlich ziemlich einfach.

Versuchen Sie, Zahlen von links nach rechts zu lesen. Wenn Sie von links nach rechts gehen, fügen Sie Werte in absteigender Reihenfolge ein: Jahr, Monat, Tag, Stunden, Minuten, Sekunden und Millisekunden.

new Date(2017, 3, 22, 5, 23, 50)

// This date can be easily read if you follow the left-right formula.
// Year: 2017,
// Month: April (because month is zero-indexed)
// Date: 22
// Hours: 05
// Minutes: 23
// Seconds: 50

Der problematischste Teil bei Datum ist, dass der Monats-Wert nullindiziert ist, d.h. Januar === 0, Februar === 1, März === 2 und so weiter.

Es ist etwas seltsam, dass JavaScript nullindiziert ist (anscheinend, weil so hat es Java gemacht), aber anstatt darüber zu streiten, warum der Januar 1 (und nicht 0) sein sollte, ist es besser zu akzeptieren, dass der Monat in JavaScript nullindiziert ist. Sobald Sie diese Tatsache akzeptieren, werden Daten viel einfacher zu handhaben sein.

Hier sind weitere Beispiele, um sich damit vertraut zu machen.

// 21st March 1988, 12am, Local Time.
new Date(1988, 2, 21)

// 25th December 2019, 8am, Local Time.
new Date(2019, 11, 25, 8)

// 6th November 2023, 2:20am, Local Time
new Date(2023, 10, 6, 2, 20)

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

Beachten Sie, dass die mit Argumenten erstellten Daten alle in lokaler Zeit liegen?

Das ist einer der Vorteile der Verwendung von Argumenten - Sie werden nicht zwischen lokaler Zeit und UTC verwirrt. Wenn Sie jemals UTC benötigen, erstellen Sie ein Datum in UTC auf diese Weise.

// 11th June 2019, 12am, UTC.
new Date(Date.UTC(2019, 5, 11))

Datumserstellung mit Zeitstempeln

In JavaScript ist ein Zeitstempel die Anzahl der Millisekunden, die seit dem 1. Januar 1970 vergangen sind (1. Januar 1970 ist auch als Unix-Epoche bekannt). Aus meiner Erfahrung verwendet man Zeitstempel selten, um Daten zu erstellen. Man verwendet Zeitstempel nur zum Vergleichen verschiedener Daten (mehr dazu später).

// 11th June 2019, 8am (in my Local Time, Singapore)
new Date(1560211200000)

Ohne Argumente

Wenn Sie ein Datum ohne Argumente erstellen, erhalten Sie ein Datum, das auf die aktuelle Uhrzeit gesetzt ist (in lokaler Zeit).

new Date()

Sie können auf dem Bild erkennen, dass es in Singapur 25. Mai, 11:10 Uhr war, als ich diesen Artikel schrieb.

Zusammenfassung zur Datumserstellung

1. Sie können ein Datum mit new Date() erstellen.
2. Es gibt vier mögliche Syntaxen
   1. Mit einem Datumsstring
   2. Mit Argumenten
   3. Mit Zeitstempel
   4. Ohne Argumente
3. Erstellen Sie niemals ein Datum mit der Datumsstring-Methode.
4. Am besten erstellen Sie Daten mit der Argumentenmethode.
5. Denken Sie daran (und akzeptieren Sie), dass Monate in JavaScript nullindiziert sind.

Als nächstes sprechen wir über die Konvertierung eines Datums in einen lesbaren String.

Formatierung eines Datums

Die meisten Programmiersprachen bieten Ihnen ein Formatierungswerkzeug, um jedes gewünschte Datumsformat zu erstellen. Zum Beispiel können Sie in PHP date("d M Y") schreiben, um ein Datum wie 23 Jan 2019 zu erhalten.

Aber es gibt keine einfache Möglichkeit, ein Datum in JavaScript zu formatieren.

Das native Date-Objekt verfügt über sieben Formatierungsmethoden. Jede dieser sieben Methoden liefert Ihnen einen bestimmten Wert (und sie sind ziemlich nutzlos).

const date = new Date(2019, 0, 23, 17, 23, 42)

1. toString gibt Ihnen Wed Jan 23 2019 17:23:42 GMT+0800 (Singapore Standard Time).
2. toDateString gibt Ihnen Wed Jan 23 2019.
3. toLocaleString gibt Ihnen 23.01.2019, 17:23:42.
4. toLocaleDateString gibt Ihnen 23.01.2019.
5. toGMTString gibt Ihnen Wed, 23 Jan 2019 09:23:42 GMT.
6. toUTCString gibt Ihnen Wed, 23 Jan 2019 09:23:42 GMT.
7. toISOString gibt Ihnen 2019-01-23T09:23:42.079Z.

Wenn Sie ein benutzerdefiniertes Format benötigen, müssen Sie es selbst erstellen.

Schreiben eines benutzerdefinierten Datumsformats

Nehmen wir an, Sie möchten etwas wie Do, 23. Januar 2019. Um diesen Wert zu erstellen, müssen Sie die Datums­methoden kennen (und verwenden), die mit dem Date-Objekt geliefert werden.

Um Datumsangaben zu erhalten, können Sie diese vier Methoden verwenden.

1. getFullYear: Gibt die 4-stellige Jahreszahl gemäß der lokalen Zeit zurück.
2. getMonth: Gibt den Monat des Jahres (0-11) gemäß der lokalen Zeit zurück. Der Monat ist nullindiziert.
3. getDate: Gibt den Tag des Monats (1-31) gemäß der lokalen Zeit zurück.
4. getDay: Gibt den Wochentag (0-6) gemäß der lokalen Zeit zurück. Der Wochentag beginnt mit Sonntag (0) und endet mit Samstag (6).

Es ist einfach, 23 und 2019 für Do, 23. Januar 2019 zu erstellen. Wir können getFullYear und getDate verwenden, um sie zu erhalten.

const d = new Date(2019, 0, 23)
const year = d.getFullYear() // 2019
const date = d.getDate() // 23

Es ist schwieriger, Do und Januar zu erhalten.

Um Januar zu erhalten, müssen Sie ein Objekt erstellen, das den Wert aller zwölf Monate ihren entsprechenden Namen zuordnet.

const months = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December'
}

Da der Monat nullindiziert ist, können wir stattdessen ein Array verwenden. Es liefert die gleichen Ergebnisse.

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

Um Januar zu erhalten, müssen Sie

1. Verwenden Sie getMonth, um den nullindizierten Monat aus dem Datum zu erhalten.
2. Holen Sie sich den Monatsnamen aus months.

const monthIndex = d.getMonth()
const monthName = months[monthIndex]
console.log(monthName) // January

Die komprimierte Version.

const monthName = months[d.getMonth()]
console.log(monthName) // January

Das Gleiche tun Sie, um Do zu erhalten. Diesmal benötigen Sie ein Array, das die sieben Tage der Woche enthält.

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]

Dann tun Sie

1. Holen Sie sich dayIndex mit getDay.
2. Verwenden Sie dayIndex, um dayName zu erhalten.

const dayIndex = d.getDay()
const dayName = days[dayIndex] // Thu

Kurzversion.

const dayName = days[d.getDay()] // Thu

Dann kombinieren Sie alle Variablen, die Sie erstellt haben, um den formatierten String zu erhalten.

const formatted = `${dayName}, ${date} ${monthName} ${year}`
console.log(formatted) // Thu, 23 January 2019

Ja, es ist mühsam. Aber es ist nicht unmöglich, wenn man den Dreh erst einmal raus hat.

Wenn Sie jemals ein benutzer­definiert formatiertes Datum erstellen müssen, können Sie die folgenden Methoden verwenden.

1. getHours: Gibt Stunden (0-23) gemäß der lokalen Zeit zurück.
2. getMinutes: Gibt Minuten (0-59) gemäß der lokalen Zeit zurück.
3. getSeconds: Gibt Sekunden (0-59) gemäß der lokalen Zeit zurück.
4. getMilliseconds: Gibt Millisekunden (0-999) gemäß der lokalen Zeit zurück.

Als nächstes sprechen wir über den Vergleich von Daten.

Daten vergleichen

Wenn Sie wissen möchten, ob ein Datum vor oder nach einem anderen Datum liegt, können Sie sie direkt mit >, <, >= und <= vergleichen.

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier < later) // true

Es ist schwieriger, wenn Sie prüfen möchten, ob zwei Daten genau zur gleichen Zeit liegen. Sie können sie nicht mit == oder === vergleichen.

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

Um zu prüfen, ob zwei Daten genau zur gleichen Zeit liegen, können Sie ihre Zeitstempel mit getTime prüfen.

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

Wenn Sie prüfen möchten, ob zwei Daten am selben Tag liegen, können Sie ihre getFullYear, getMonth und getDate Werte prüfen.

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10am
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // true

Es gibt noch eine letzte Sache, die wir behandeln müssen.

Ein Datum aus einem anderen Datum erhalten

Es gibt zwei mögliche Szenarien, in denen Sie ein Datum aus einem anderen Datum erhalten möchten.

1. Einen bestimmten Datums-/Uhrzeitwert aus einem anderen Datum setzen.
2. Eine Differenz zu einem anderen Datum addieren/subtrahieren.

Einen bestimmten Datums-/Uhrzeitwert setzen

Sie können diese Methoden verwenden, um ein Datum/eine Uhrzeit aus einem anderen Datum zu setzen.

1. setFullYear: Setzt das 4-stellige Jahr in lokaler Zeit.
2. setMonth: Setzt den Monat des Jahres in lokaler Zeit.
3. setDate: Setzt den Tag des Monats in lokaler Zeit.
4. setHours: Setzt die Stunden in lokaler Zeit.
5. setMinutes: Setzt die Minuten in lokaler Zeit.
6. setSeconds: Setzt die Sekunden in lokaler Zeit.
7. setMilliseconds: Setzt die Millisekunden in lokaler Zeit.

Wenn Sie zum Beispiel ein Datum auf den 15. des Monats setzen möchten, können Sie setDate(15) verwenden.

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 January 2019

Wenn Sie den Monat auf Juni setzen möchten, können Sie setMonth verwenden. (Denken Sie daran, dass der Monat in JavaScript nullindiziert ist!)

const d = new Date(2019, 0, 10)
d.setMonth(5)

console.log(d) // 10 June 2019

Hinweis: Die oben genannten Setter-Methoden ändern das ursprüngliche Datumsobjekt. In der Praxis sollten wir Objekte nicht verändern (mehr dazu hier). Wir sollten diese Operationen stattdessen auf einem neuen Datumsobjekt durchführen.

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 January 2019
console.log(newDate) // 10 June 2019

Delta zu einem anderen Datum addieren/subtrahieren

Eine Differenz ist eine Änderung. Indem ich eine Differenz zu einem anderen Datum addiere/subtrahiere, meine ich Folgendes: Sie möchten ein Datum erhalten, das X von einem anderen Datum entfernt ist. Das kann X Jahre, X Monate, X Tage usw. sein.

Um eine Differenz zu erhalten, müssen Sie den aktuellen Wert des Datums kennen. Sie können ihn mit diesen Methoden abrufen.

1. getFullYear: Gibt die 4-stellige Jahreszahl gemäß der lokalen Zeit zurück.
2. getMonth: Gibt den Monat des Jahres (0-11) gemäß der lokalen Zeit zurück.
3. getDate: Gibt den Tag des Monats (1-31) gemäß der lokalen Zeit zurück.
4. getHours: Gibt Stunden (0-23) gemäß der lokalen Zeit zurück.
5. getMinutes: Gibt Minuten (0-59) gemäß der lokalen Zeit zurück.
6. getSeconds: Gibt Sekunden (0-59) gemäß der lokalen Zeit zurück.
7. getMilliseconds: Gibt Millisekunden (0-999) gemäß der lokalen Zeit zurück.

Es gibt zwei allgemeine Ansätze, um eine Differenz zu addieren/subtrahieren. Der erste Ansatz ist auf Stack Overflow beliebter. Er ist prägnant, aber schwerer zu verstehen. Der zweite Ansatz ist ausführlicher, aber leichter zu verstehen.

Lassen Sie uns beide Ansätze durchgehen.

Sagen wir, Sie möchten ein Datum erhalten, das drei Tage von heute entfernt ist. Für dieses Beispiel nehmen wir auch an, dass heute der 28. März 2019 ist. (Es ist einfacher zu erklären, wenn wir mit einem festen Datum arbeiten).

Der erste Ansatz (der Set-Ansatz)

// Assumes today is 28 March 2019
const today = new Date(2019, 2, 28)

Zuerst erstellen wir ein neues Date-Objekt (damit wir das ursprüngliche Datum nicht verändern).

const finalDate = new Date(today)

Als Nächstes müssen wir den Wert kennen, den wir ändern möchten. Da wir Tage ändern, können wir den Tag mit getDate abrufen.

const currentDate = today.getDate()

Wir möchten ein Datum, das drei Tage von heute entfernt ist. Wir addieren die Differenz (3) zum aktuellen Datum.

finalDate.setDate(currentDate + 3)

Vollständiger Code für den Set-Ansatz.

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)

console.log(finalDate) // 31 March 2019

Der zweite Ansatz (der New-Date-Ansatz)

Hier verwenden wir getFullYear, getMonth, getDate und andere Getter-Methoden, bis wir die Art des Wertes erreichen, den wir ändern möchten. Dann erstellen wir das endgültige Datum mit new Date.

const today = new Date(2019, 2, 28)

// Getting required values
const year = today.getFullYear()
const month = today.getMonth()
const day = today.getDate()

// Creating a new Date (with the delta)
const finalDate = new Date(year, month, day + 3)

console.log(finalDate) // 31 March 2019

Beide Ansätze funktionieren. Wählen Sie einen und bleiben Sie dabei.

Automatische Datumskorrektur

Wenn Sie dem Datum einen Wert außerhalb seines akzeptablen Bereichs übergeben, berechnet JavaScript das Datum automatisch für Sie neu.

Hier ist ein Beispiel. Nehmen wir an, wir setzen das Datum auf den 33. März 2019. (Es gibt keinen 33. März im Kalender). In diesem Fall passt JavaScript den 33. März automatisch auf den 2. April an.

// 33rd March => 2nd April
new Date(2019, 2, 33)

Das bedeutet, Sie müssen sich keine Gedanken über die Berechnung von Minuten, Stunden, Tagen, Monaten usw. machen, wenn Sie eine Differenz erstellen. JavaScript erledigt das automatisch für Sie.

// 33rd March => 2nd April
new Date(2019, 2, 30 + 3)

Und das ist alles, was Sie über das native Date-Objekt von JavaScript wissen müssen.

Mehr über Datum in JavaScript

• Datum und Uhrzeit in JavaScript verstehen (DigitalOcean)
• Das JavaScript Date-Objekt erkunden (Alligator.io)

Interessiert an mehr JavaScript?

Wenn Sie diese Einführung in Datum nützlich fanden, könnten Ihnen Learn JavaScript gefallen, ein Kurs, den ich erstellt habe, um Leuten alles beizubringen, was sie über JavaScript wissen müssen.

Im Kurs behandle ich die grundlegenden Konzepte, die Sie kennen müssen, und zeige Ihnen dann, wie Sie die gelernten Konzepte verwenden, um Komponenten für die reale Welt zu erstellen.

Schauen Sie es sich an. Möglicherweise finden Sie es hilfreich.

In der Zwischenzeit können Sie sich gerne an mich wenden, wenn Sie JavaScript-Fragen haben. Ich werde mein Bestes tun, um kostenlose Artikel zu erstellen, um Ihre Fragen zu beantworten.