Der ultimative Leitfaden für JavaScript Date und Moment.js

Willkommen zu unserer ultimativen Anleitung zum JavaScript- DateObjekt und zu Moment.js. In diesem Tutorial erfahren Sie alles, was Sie über die Arbeit mit Datum und Uhrzeit in Ihren Projekten wissen müssen.

So erstellen Sie ein DateObjekt

Holen Sie sich das aktuelle Datum und die Uhrzeit

const now = new Date(); // Mon Aug 10 2019 12:58:21 GMT-0400 (Eastern Daylight Time)

Holen Sie sich ein Datum und eine Uhrzeit mit individuellen Werten

const specifiedDate = new Date(2019, 4, 29, 15, 0, 0, 0); // Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Die Syntax lautet Date(year, month, day, hour, minute, second, millisecond).

Beachten Sie, dass die Monate nullindexiert sind, beginnend mit Januar bei 0 und endend mit Dezember bei 11.

Holen Sie sich ein Datum und eine Uhrzeit aus einem Zeitstempel

const unixEpoch = new Date(0);

Dies ist die Zeit am Donnerstag, dem 1. Januar 1970 (UTC) oder die Unix-Epoche. Die Unix-Epoche ist wichtig, da JavaScript, Python, PHP und andere Sprachen und Systeme intern zur Berechnung der aktuellen Zeit verwendet werden.

new Date(ms) Gibt das Datum der Epoche plus die Anzahl der Millisekunden zurück, die Sie übergeben. An einem Tag sind es 86.400.000 Millisekunden.

const dayAfterEpoch = new Date(86400000);

wird Freitag, 2. Januar 1970 (UTC) zurückkehren.

Holen Sie sich ein Datum und eine Uhrzeit aus einer Zeichenfolge

const stringDate = new Date('May 29, 2019 15:00:00'); // Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Das Datum auf diese Weise zu erhalten ist sehr flexibel. Alle folgenden Beispiele geben gültige DateObjekte zurück:

new Date('2019-06') // June 1st, 2019 00:00:00 new Date('2019-06-16') // June 16th, 2019 new Date('2019') // January 1st, 2019 00:00:00 new Date('JUNE 16, 2019') new Date('6/23/2019')

Sie können die Date.parse()Methode auch verwenden , um die Anzahl der Millisekunden seit der Epoche (1. Januar 1970) zurückzugeben:

Date.parse('1970-01-02') // 86400000 Date.parse('6/16/2019') // 1560610800000

Zeitzone einstellen

Wenn Sie eine Datumszeichenfolge übergeben, ohne eine Zeitzone festzulegen, geht JavaScript davon aus, dass sich Datum und Uhrzeit in UTC befinden, bevor Sie sie in die Zeitzone Ihres Browsers konvertieren:

const exactBirthdate = new Date('6/13/2018 06:27:00'); console.log(exactBirthdate) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

Dies kann zu Fehlern führen, bei denen das zurückgegebene Datum um viele Stunden verschoben ist. Um dies zu vermeiden, übergeben Sie eine Zeitzone zusammen mit der Zeichenfolge:

const exactBirthdate = new Date('6/13/2018 06:27:00 GMT-1000'); console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time) /* These formats also work: new Date('6/13/2018 06:27:00 GMT-10:00'); new Date('6/13/2018 06:27:00 -1000'); new Date('6/13/2018 06:27:00 -10:00'); */

Sie können auch einige, aber nicht alle Zeitzonencodes übergeben:

const exactBirthdate = new Date('6/13/2018 06:27:00 PDT'); console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time)

Date Objektmethoden

Oft benötigen Sie nicht das gesamte Datum, sondern nur einen Teil davon wie Tag, Woche oder Monat. Glücklicherweise gibt es eine Reihe von Methoden, um genau das zu tun:

const birthday = new Date('6/13/2018 06:27:39'); birthday.getMonth() // 5 (0 is January) birthday.getDate() // 13 birthday.getDay() // 3 (0 is Sunday) birthday.getFullYear() // 2018 birthday.getTime() // 1528838859000 (milliseconds since the Unix Epoch) birthday.getHours() // 6 birthday.getMinutes() // 27 birthday.getSeconds() // 39 birthday.getTimezoneOffset() // -540 (time zone offset in minutes based on your browser's location)

Erleichtern Sie mit Moment.js die Arbeit mit Daten

Das richtige Datum und die richtige Uhrzeit zu finden, ist keine leichte Aufgabe. Jedes Land scheint eine andere Art der Formatierung von Daten zu haben, und die Berücksichtigung unterschiedlicher Zeitzonen und der Sommerzeit / Sommerzeit nimmt viel Zeit in Anspruch. Hier erstrahlt Moment.js - das Parsen, Formatieren und Anzeigen von Datumsangaben ist ein Kinderspiel.

Um Moment.js zu verwenden, installieren Sie es über einen Paketmanager wie npmoder fügen Sie es über ein CDN zu Ihrer Site hinzu. Weitere Informationen finden Sie in der Dokumentation zu Moment.js.

Holen Sie sich das aktuelle Datum und die aktuelle Uhrzeit mit Moment.js

const now = moment();

Dadurch wird ein Objekt mit Datum und Uhrzeit basierend auf dem Standort Ihres Browsers sowie anderen Gebietsschemainformationen zurückgegeben. Es ist ähnlich wie bei nativen JavaScript new Date().

Holen Sie sich mit Moment.js ein Datum und eine Uhrzeit aus einem Zeitstempel

Ähnlich wie bei new Date(ms)können Sie die Anzahl der Millisekunden seit der Epoche an Folgendes übergeben moment():

const dayAfterEpoch = moment(86400000);

Wenn Sie ein Datum mit einem Unix-Zeitstempel in Sekunden erhalten möchten, können Sie folgende unix()Methode verwenden:

const dayAfterEpoch = moment.unix(86400);

Holen Sie sich mit Moment.js ein Datum und eine Uhrzeit aus einer Zeichenfolge

Das Parsen eines Datums aus einer Zeichenfolge mit Moment.js ist einfach, und die Bibliothek akzeptiert Zeichenfolgen im Datums- / Uhrzeitformat ISO 8601 oder RFC 2822 sowie alle vom JavaScript- DateObjekt akzeptierten Zeichenfolgen .

ISO 8601-Zeichenfolgen werden empfohlen, da dies ein weit verbreitetes Format ist. Hier sind einige Beispiele:

moment('2019-04-21'); moment('2019-04-21T05:30'); moment('2019-04-21 05:30'); moment('20190421'); moment('20190421T0530');

Festlegen einer Zeitzone mit Moment.js

Up until now, we have been using Moment.js in local mode, meaning that any input is assumed to be a local date or time. This is similar to how the native JavaScript Date object works:

const exactBirthMoment = moment('2018-06-13 06:27:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

However, to set a time zone, you must first get the Moment object in UTC mode:

const exactBirthMoment = moment.utc('2018-06-13 06:27:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 15:27:00 GMT+0900 (Korean Standard Time)

Then you can adjust for the difference in time zones with the utcOffset() method:

const exactBirthMoment = moment.utc('2018-06-13 06:27:00').utcOffset('+10:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

You can also set the UTC offset as a number or a string:

moment.utc().utcOffset(10) // Number of hours offset moment.utc().utcOffset(600) // Number of minutes offset moment.utc().utcOffset('+10:00') // Number of hours offset as a string

To use named time zones (America/Los_Angeles) or time zone codes (PDT) with Moment objects, check out the Moment Timezone library.

Format the date and time with Moment.js

One of the major strengths that Moment.js has over native JavaScript Date objects is how easy it is to format the output date and time. Just chain the  format() method to a Moment date object and pass it a format string as a parameter:

moment().format('MM-DD-YY'); // "08-13-19" moment().format('MM-DD-YYYY'); // "08-13-2019" moment().format('MM/DD/YYYY'); // "08/13/2019" moment().format('MMM Do, YYYY') // "Aug 13th, 2019" moment().format('ddd MMMM Do, YYYY HH:mm:ss') // "Tues August 13th, 2019 19:29:20" moment().format('dddd, MMMM Do, YYYY -- hh:mm:ss A') // "Tuesday, August 13th, 2019 -- 07:31:02 PM"

Here's a table with some common formatting tokens:

InputOutputDescription
YYYY20194 digit year
YY192 digit year
MMMMAugustFull month name
MMMAugAbbreviated month name
MM082 digit month
M81 digit month
DDD225Day of the year
DD13Day of the month
Do13thDay of the month with ordinal
ddddWednesdayFull day name
dddWedAbbreviated day name
HH17Hours in 24 hour time
hh05Hours in 12 hour time
mm32Minutes
ss19Seconds
aam / pmAnte or post meridiem
AAM / PMCapitalized ante or post meridiem
ZZ+0900Timezone offset from UTC
X1410715640.579Unix timestamp in seconds
XX1410715640579Unix timestamp in milliseconds

See the Moment.js docs for more formatting tokens.

Working with JavaScript Date objects and Moment.js doesn't have to be time consuming. Now you should know more than enough to get started with both.