Alles, was Sie Wissen Müssen Über Datum in JavaScript

0
25

Datum ist komisch in JavaScript. Es kommt auf die unsere Nerven so sehr, dass wir erreichen für Bibliotheken (wie Datum-fns und Zeitpunkt) das moment (ha!) wir brauchen für die Arbeit mit Datum und Zeit.

Aber wir brauchen nicht immer zu benutzen Bibliotheken. Datum kann eigentlich ganz einfach, wenn Sie wissen, was to watch out for. In diesem Artikel werde ich gehen Sie durch alles, was Sie wissen müssen über das Date-Objekt.

Zuerst lassen Sie uns erkennen die Existenz der Zeitzonen.

Zeitzonen

Es gibt Hunderte von Zeitzonen in unsere Welt. In JavaScript, interessieren wir uns nur über zwei Lokale Zeit und UTC (Universal Time Coordinated).

  • Lokale Zeit bezieht sich auf die Zeitzone in Ihrem computer befindet.
  • UTC ist gleichbedeutend mit der Greenwich Mean Time (GMT) in der Praxis.

Standardmäßig sind nahezu alle Datum-Methode in JavaScript (mit einer Ausnahme) gibt ein Datum/Uhrzeit in die lokale Zeit. Sie bekommen nur UTC, wenn Sie angeben UTC.

Mit diesem können wir reden über das erstellen von Terminen.

Erstellung eines date

Sie können ein date mit new Date(). Es gibt vier mögliche Wege zur Nutzung new Date():

  1. Mit einem Datums-string
  2. Mit Datum Argumente
  3. Mit einem timestamp
  4. Ohne Argumente

Der Datum-string-Methode

In der Datum-string-Methode, erstellen Sie ein Datum, indem ein Datum-string in neue Datum.

new Date(‘1988-03-21’)

Wir neigen dazu, in Richtung der Datum-string-Methode auf, wenn wir schreiben, Termine. Dies ist natürlich, denn wir haben mit Datums-Zeichenketten unser aller Leben.

Wenn ich Schreibe, 21-03-1988, Sie haben keine Probleme mit der Aufzucht es ist 21st März 1988. Ja? Aber wenn Sie schreiben, 21-03-1988 in JavaScript, erhalten Sie Ungültige Datum.

new Date(’21-03-1988′) liefert Ungültiges Datum.

Es gibt einen guten Grund für diese.

Wir interpretieren von Datums-Zeichenketten unterschiedlich in verschiedenen teilen der Welt. Zum Beispiel 11-06-2019 ist entweder 11 Juni, 2019 oder 6. November 2019. Aber Sie können nicht sicher sein, welches ich mich beziehe, es sei denn, Sie kennen das Datum-system ich verwende.

In JavaScript, wenn Sie wollen, verwenden Sie ein Datums-string ist, müssen Sie ein format verwenden, das ist weltweit anerkannt. Eines dieser Formate ist das ISO-8601-Extended-format.

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

Hier ist, was die Werte bedeuten:

  • JJJJ: 4-stellige Jahr
  • MM: 2-stelliger Monat (wo Januar 01 bis Dezember 12)
  • DD: 2-stellige Datum (0 bis 31)
  • – :- Datum-Trennzeichen
  • T: Zeigt den Anfang der Zeit
  • HH: 24-stellige Stunde (0 bis 23)
  • mm: Minuten (0 bis 59)
  • ss: Sekunden (0 bis 59)
  • sss: Millisekunden (0 bis 999)
  • :: Zeit-Trennzeichen
  • Z: Falls Z vorhanden ist, das Datum auf UTC eingestellt ist. Wenn Z nicht vorhanden, es werden Lokale Zeit. (Dies gilt nur, wenn Zeit zur Verfügung steht.)

Stunden, Minuten, Sekunden und Millisekunden sind optional, wenn Sie ein Datum. Also, wenn Sie wollen ein date für 11. Juni 2019, schreiben Sie dies:

new Date(‘2019-06-11’)

Achten Sie besonders hier. Es gibt ein riesiges problem mit dem erstellen von Terminen mit Datum-strings. Sie können vor Ort das problem, wenn man die Konsole.melden Sie dieses Datum.

Wenn Sie Leben in einem Gebiet, das hinter der MEZ, erhalten Sie ein Datum, das sagt 10 Juni.

new Date(‘2019-06-11’) produziert 10 Juni, wenn Sie in einem Ort hinter der MEZ.

Wenn Sie Leben in einem Gebiet, das vor der GMT, erhalten Sie ein Datum, das sagt 11 Juni.

new Date(‘2019-06-11’) produziert, die 11 Juni, wenn Sie in einem Ort nach GMT.

Dies geschieht, weil das Datum-string-Methode hat ein eigenartiges Verhalten: Wenn Sie ein Datum (ohne Angabe von Zeit), bekommen Sie ein Datum im UTC-Format.

Im obigen Szenario, wenn Sie schreiben new Date(‘2019-06-11’), Sie tatsächlich schaffen, ein Datum, das sagt 11 Juni, 2019, 12 Uhr UTC. Dies ist, warum Menschen, die in den Gebieten Leben, hinter der MEZ bekommen Sie einen 10 Juni statt 11 Juni.

Wenn Sie möchten, erstellen Sie ein Datum in der Lokalen Zeit mit der Datum-string-Methode, müssen Sie die Zeit. Wenn Sie die Zeit, die Sie brauchen, zu schreiben das HH und mm mindestens (oder Google Chrome gibt ein ungültiges Datum).

new Date(‘2019-06-11T00:00’)

Datum erstellt, in der Lokalen Zeit von “vsl”. Datum der Erstellung in UTC.

Das ganze Local Time vs. UTC Sache mit Datum-strings kann eine mögliche Fehlerquelle, die schwer zu fangen. Also, ich empfehle Sie nicht erstellen Sie Termine mit Datum-strings.

(Übrigens, MDN warnt vor den Datum-string-Ansatz, da können Browser Parsen von Datums-strings unterschiedlich).

MDN spricht sich gegen die Erstellung von Datum-mit Datum-strings.

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

Erstellen von Terminen mit Argumenten

Sie kann in bis zu sieben Argumente zu erstellen, die ein Datum/Zeit.

  1. Jahr: 4-stelliges Jahr.
  2. Monat: Monat des Jahres (0-11). Monat ist null-indiziert. Standardmäßig auf 0, wenn Sie weggelassen werden.
  3. Tag: Tag des Monats (1-31). Standardmäßig auf 1, wenn weggelassen.
  4. Hour: Stunde des Tages (0-23). Standardmäßig auf 0, wenn Sie weggelassen werden.
  5. Minuten: Minuten (0-59). Standardmäßig auf 0, wenn Sie weggelassen werden.
  6. Sekunden: Sekunden (0-59). Standardmäßig auf 0, wenn Sie weggelassen werden.
  7. Millisekunden: Millisekunden (0-999). Standardmäßig auf 0, wenn Sie weggelassen werden.

// 11 Juni 2019, 5:23:59 Lokaler Zeit
neues Datum(2019, 5, 11, 5, 23, 59)

Viele Entwickler (mich eingeschlossen) zu vermeiden, die die Argumente Ansatz, weil es kompliziert aussieht. Aber es ist eigentlich ganz einfach.

Versuchen Sie Lesen die zahlen von Links nach rechts. Wie Sie gehen von Links nach rechts, Sie legen Werte in Abnehmender Größenordnung: Jahr, Monat, Tag, Stunden, Minuten, Sekunden und Millisekunden.

neues Datum(2017, 3, 22, 5, 23, 50)

// Das Datum kann leicht gelesen werden, wenn Sie Folgen Sie der Links-rechts-Formel.
// Jahr: 2017,
// Monat: April (da Monat ist null-indiziert)
// Datum: 22
// Öffnungszeiten: 05
// Minuten: 23
// Sekunden: 50

Der problematischste Teil mit dem Datum ist, dass der Monat Wert ist null-indiziert, wie in der Januar – = = = 0, Februar === 1, März === 2 und so weiter.

Wir haben keine Ahnung, warum der Monat in JavaScript ist null-indiziert, aber es ist. Anstatt darüber streiten, warum. Januar 1 (und nicht 0), und es ist besser zu akzeptieren, dass der Monat mit null indiziert, in JavaScript. Sobald Sie diese Tatsache akzeptieren, Termine werden viel einfacher, mit zu arbeiten.

Hier sind einige weitere Beispiele, die Ihnen vertraut zu machen:

// 21. März 1988, 12 Uhr, Lokale Zeit.
new Date(1988, 2, 21)

// 25. Dezember 2019, 8 Uhr Ortszeit.
new Date(2019, 11, 25, 8)

// 6. November 2023, 2:20 Uhr Ortszeit
neues Datum(2023, 10, 6, 2, 20)

// 11 Juni 2019, 5:23:59 Lokaler Zeit
neues Datum(2019, 5, 11, 5, 23, 59)

Beachten Sie die Termine erstellt Argumente sind alle in der Lokalen Zeit?

Das ist einer der Vorteile der Verwendung von Argumenten—werden Sie nicht bekommen, verwirrt zwischen der Lokalen Zeit und der UTC. Wenn Sie jemals brauchen, UTC, erstellen Sie ein Datum in UTC auf diese Weise:

// 11 Juni 2019, 12 Uhr, UTC.
new Date(Datum.UTC(2019, 5, 11))
Erstellen von Daten mit Zeitstempel

In JavaScript, ein timestamp ist die Menge der vergangenen Millisekunden seit dem 1. Januar 1970 (1. Januar 1970, auch bekannt als Unix epoch time). Aus meiner Erfahrung selten Zeitstempel verwenden, um Datumsangaben zu erstellen. Verwenden Sie nur timestamps zu vergleichen zwischen den verschiedenen Terminen (dazu später mehr).

// 11 Juni 2019, 8 (in meinem Ortszeit Singapur)
new Date(1560211200000)
Ohne Argumente

Wenn Sie ein Datum ohne Argumente verwenden, bekommen Sie ein Datum festlegen der aktuellen Zeit (in der Lokalen Zeit).

new Date()

Die Zeit jetzt.

Können Sie sagen, aus dem Bild, dass es die 25. Mai, 11:10 Uhr in Singapur, als ich diesen Artikel schrieb.

Übersicht über das erstellen von Terminen

  1. Sie können Datum erstellen mit new Date().
  2. Es gibt vier mögliche Schreibweisen:
    1. Mit einem Datums-string
    2. Mit Argumenten
    3. Mit timestamp
    4. Ohne Argumente
  3. Erstellen Sie niemals ein Datum mit dem Datum, string-Methode.
  4. Es ist am besten zu erstellen, Termine mit den Argumenten, die Methode.
  5. Denken Sie daran (und akzeptieren), dass im Monat ist null-indiziert, in JavaScript.

Als Nächstes reden wir über die Konvertierung eines Datums in einen lesbaren string.

Datum formatieren

Die meisten Programmiersprachen geben Sie ein Formatierungs-tool, erstellen Sie ein beliebiges Datum-format, das Sie möchten. Zum Beispiel in PHP haben, können Sie schreiben, date(“d M Y”) zu einem Zeitpunkt, wie 23 Jan 2019.

Aber es gibt keine einfache Möglichkeit, um format ein Datum in JavaScript.

Die native Date-Objekt kommt mit sieben Formatierung Methoden. Jede dieser sieben Methoden geben Sie einen bestimmten Wert (und es sind ziemlich nutzlos).

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

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

Wenn Sie ein benutzerdefiniertes format, müssen Sie Sie selbst erstellen.

Schreiben Sie eine benutzerdefinierte Datumsformat

Lassen Sie uns sagen, Sie wollen so etwas wie do, 23. Januar 2019. Um diesen Wert zu erstellen, müssen Sie wissen, (und Verwendung) der modernsten Methoden, die kommt mit dem Date-Objekt.

Um Termine, können Sie diese vier Methoden:

  1. getFullYear: Bekommt 4-stelliges Jahr gemäß Ortszeit
  2. getMonth: Bekommt Monat des Jahres (0-11) gemäß der Ortszeit. Monat ist null-indiziert.
  3. getDate: Bekommt Tag des Monats (1-31) gemäß der Ortszeit.
  4. getDay: Bekommt Tag der Woche (0-6) gemäß der Ortszeit. Tag der Woche beginnt mit dem Sonntag (0) und endet mit dem Samstag (6).

Es ist einfach zu erstellen und 2019 23 für do, 23. Januar 2019. Wir können getFullYear und getDate, um Sie zu bekommen.

const d = new Date(Jahr 2019, 0, 23)
const Jahr = d….getFullYear() // 2019
const Datum = d….getDate() // 23

Es ist schwieriger zu bekommen, heiraten und Januar.

Um Januar, die Sie benötigen, um ein Objekt zu erstellen, dass die Karten der Wert aller zwölf Monate, um Ihre jeweiligen Namen.

const Monaten = {
0: ‘Januar’,
1: ‘Februar’,
2: ‘März’,
3: ‘April’,
4: ‘Mai’,
5: ‘Juni’,
6: ‘Juli’,
7: ‘August’,
8: ‘September’,
9: ‘Oktober’,
10: ‘November’,
11: ‘Dezember’
}

Seit Monat ist null-indiziert sind, können wir ein array verwenden, anstatt auf ein Objekt. Es liefert die gleichen Ergebnisse.

const Monate = [
‘Januar’,
‘Februar’,
‘März’,
‘April’,
‘Mai’,
‘Juni’,
‘Juli’,
‘August’,
‘September’,
‘Oktober’,
‘November’,
‘Dezember’
]

Um Januar, müssen Sie zu:

  1. Verwenden getMonth um die null-indiziert Monat aus dem Datum.
  2. Holen Sie sich die Monats Namen von Monaten

const monthIndex = d….getMonth()
const Monatsname = Monate(monthIndex)
console.log(monthName) // Januar

Die gekürzte version:

const Monatsname = Monate(d….getMonth())
console.log(monthName) // Januar

Sie tun die gleiche Sache zu bekommen Thu. Dieses mal, müssen Sie ein array enthält sieben Tagen der Woche.

const Tage = [
‘Sonne’,
‘Mo’,
‘Tue’,
‘Mi’,
‘Do’,
‘FR’,
‘Sat’
]

Dann Sie:

  1. Holen Sie sich dayIndex mit getDay
  2. Verwenden dayIndex zu bekommen dayName

const dayIndex = d….getDay()
const dayName = Tage[dayIndex] // do

Kurze version:

const dayName = Tage[d….getDay()] // do

Dann kombinieren Sie alle Variablen, die Sie erstellt, um die formatierte Zeichenfolge.

const formatiert = `${dayName}, ${date} ${monthName} ${Jahr}`
console.log(formatiert) // do, 23. Januar 2019

Ja, es ist mühsam. Aber es ist nicht unmöglich, sobald Sie das hängen davon bekommen.

Wenn Sie jemals brauchen, um eine benutzerdefinierte formatierte Zeit, können Sie die folgenden Methoden verwenden:

  1. getHours: Bekommt die Stunden (0-23) gemäß der Ortszeit.
  2. getMinutes: Bekommt Minuten (0-59) gemäß der Ortszeit.
  3. getSeconds: Bekommt Sekunden (0-59) gemäß der Ortszeit.
  4. getMilliseconds: Bekommt Millisekunden (0-999) gemäß der Ortszeit.

Als Nächstes reden wir über den Vergleich von Daten.

Vergleichen Termine

Wenn Sie wissen möchten, ob ein Datum vor oder nach einem anderen Datum vergleichen kann man Sie direkt mit >, <, >= und <=.

const früher = new Date(Jahr 2019, 0, 26)
const later = new Date(Jahr 2019, 0, 27)

console.log(früher < später) // true

Es ist schwieriger, wenn Sie wollen, um zu überprüfen, ob zwei Termine fallen genau zur gleichen Zeit. Sie können nicht im Vergleich mit == oder ===.

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

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

Um zu überprüfen, ob zwei Termine fallen genau zur gleichen Zeit, können Sie überprüfen Sie Ihre Zeitstempel mit getTime.

const isSameTime = (a, b) => {
Rückkehr ein.getTime() === b.getTime () –
}

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

Wenn Sie prüfen wollen, ob zwei Termine fallen auf den gleichen Tag, können Sie überprüfen Sie Ihre getFullYear, getMonth und getDate-Werte.

const isSameDay = (a, b) => {
Rückkehr ein.getFullYear() === b.getFullYear() &&
ein.getMonth() === b.getMonth() &&
ein.getDate()=== b.getDate()
}

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

Es gibt eine Letzte Sache, die wir haben, zu decken.

Immer ein Datum von einem anderen Datum

Es gibt zwei mögliche Szenarien, wo Sie wollen zu bekommen ein Datum von einem anderen Datum.

  1. Setzen Sie einen bestimmten Datums – /Uhrzeitwert von einem anderen Datum.
  2. Addieren/subtrahieren eines delta von einem anderen Datum.

Die Einstellung einer bestimmten Datum/Uhrzeit

Sie können diese Methoden verwenden, um ein Datum/Zeit von einem anderen Datum:

  1. setFullYear: Set 4-stelliges Jahr in Lokaler Zeit.
  2. setMonth: Einstellen Monat des Jahres in Lokaler Zeit.
  3. setDate: Einstellen Tag des Monats, in Lokale Zeit.
  4. setHours: geben Sie die Stunden der Ortszeit.
  5. setMinutes: Minuten Einstellen der Ortszeit.
  6. setSeconds: Sekunden Einstellen der Ortszeit.
  7. setMilliseconds: Set Millisekunden) in Lokale Zeit.

Zum Beispiel, wenn Sie möchten, um ein Datum um den 15 des Monats, die Sie verwenden können, setDate(15).

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

console.log(d) // 15. Januar 2019

Wenn Sie festlegen möchten, im Monat Juni, können Sie setMonth. (Denken Sie daran, der Monat in JavaScript ist null-indiziert!)

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

console.log(d) // 10 Juni 2019

Hinweis: Die setter-Methoden, die oben mutieren die ursprünglichen date-Objekt. In der Praxis sollten wir nicht mutieren Objekte (mehr, warum Sie hier). Wir sollten diese Vorgänge auf ein neues date-Objekt statt.

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

console.log(d) // 10. Januar 2019
console.log(newDate) // 10 Juni 2019
Addition/Subtraktion delta von einem anderen Datum

Ein delta ist eine Veränderung. Durch addition/Subtraktion delta von einem anderen Datum, ich meine diese: Sie möchten Holen Sie sich ein Datum, das s X von einem anderen Datum. Es kann sein X Jahr X Monat X Tag, etc.

Um ein delta, müssen Sie wissen, das aktuelle Datum Wert. Sie können es mit Hilfe dieser Methoden:

  1. getFullYear: Bekommt 4-stelliges Jahr gemäß Ortszeit
  2. getMonth: Bekommt Monat des Jahres (0-11) gemäß der Ortszeit.
  3. getDate: Bekommt Tag des Monats (1-31) gemäß der Ortszeit.
  4. getHours: Bekommt die Stunden (0-23) gemäß der Ortszeit.
  5. getMinutes: Bekommt Minuten (0-59) gemäß der Ortszeit.
  6. getSeconds: Bekommt Sekunden (0-59) gemäß der Ortszeit.
  7. getMilliseconds: Bekommt Millisekunden (0-999) gemäß der Ortszeit.

Es gibt zwei Allgemeine Ansätze zum addieren/subtrahieren eines delta. Der erste Ansatz ist mehr beliebt auf Stack Overflow. Es ist kurz, aber schwer zu greifen. Der zweite Ansatz ist Ausführlicher, aber einfacher zu verstehen.

Wir gehen durch beide Ansätze.

Angenommen, Sie möchten Holen Sie sich ein Datum, drei Tage ab heute. Für dieses Beispiel, lassen Sie uns auch annehmen, heute ist der 28. März 2019. (Es ist einfacher zu erklären, wenn wir arbeiten mit einem festen Datum).

Der erste Ansatz (der set-Ansatz)
// Geht davon aus heute ist der 28. März 2019
const heute = new Date(Jahr 2019, 2, 28)

Zuerst erstellen wir ein neues Date-Objekt (also wir mutieren nicht das original-Datum)

const finalDate = new Date(heute)

Als Nächstes müssen wir wissen, den Wert, den wir ändern wollen. Da wir wechselnden Tagen, können wir den Tag mit getDate.

const currentDate = heute.getDate()

Wir wollen ein Datum, drei Tage ab heute. Wir werden verwenden Sie das delta (3) auf das aktuelle Datum.

finalDate.setDate(currentDate + 3)

Vollständige code für die set-Ansatz:

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

console.log(finalDate) // 31 März 2019
Der zweite Ansatz (der neue Tag-Ansatz)

Hier verwenden wir getFullYear, getMonth, getDate und anderen getter-Methoden, bis wir auf die Art von Wert, den wir ändern wollen. Dann verwenden wir die Finale Datum mit dem neuen Datum.

const heute = new Date(Jahr 2019, 2, 28)

// Immer erforderlichen Werte
const Jahr = heute.getFullYear()
const Monat = heute.getMonh()
const Tag = heute.getDate()

// Erstellen Sie ein neues Datum (mit delta)
const finalDate = new Date(Jahr, Monat, Tag + 3)

console.log(finalDate) // 31 März 2019

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

Automatische Datum-Korrektur

Wenn Sie das Datum mit einem Wert, der außerhalb des zulässigen Bereichs, JavaScript berechnet das Datum automatisch für Sie.

Hier ist ein Beispiel. Sagen wir, wir setzen das Datum auf Platz 33 März 2019. (Es gibt keine 33rd März auf dem Kalender). In diesem Fall JavaScript passt 33rd März bis 2. April automatisch.

// 33rd März => 2. April
new Date(2019, 2, 33)

33 März wird umgewandelt zum 2. April automatisch.

Das heißt, Sie brauchen nicht zu sorgen über die Berechnung der Minuten, Stunden, Tage, Monate, etc. beim erstellen eines delta. JavaScript behandelt es automatisch für Sie.

// 33rd März => 2. April
new Date(2019, 2, 30 + 3)

30 + 3 = 33. 33 März wird umgewandelt zum 2. April automatisch.

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

Interessiert, um mehr zu erfahren JavaScript?

Wenn dir dieses intro to Date, nützlich, könnte man Liebe Lernen JavaScript, einen Kurs, den ich geschaffen, um die Menschen lehren, alles, was Sie wissen müssen über JavaScript.

In der ich natürlich decken die grundlegenden Konzepte von dem, was Sie wissen müssen, dann zeige ich Ihnen, wie Sie mithilfe der Konzepte, die Sie gelernt, aufzubauen realen Komponenten.

Einen Blick zu haben. Vielleicht finden Sie es hilfreich.

In der Zwischenzeit, wenn Sie irgendwelche JavaScript-Fragen, fühlen sich frei, mich zu Kontaktieren. Werde ich machen am besten erstellen Sie Kostenlose Artikel, um Ihre Fragen zu beantworten.