Ο απόλυτος οδηγός για την Ημερομηνία JavaScript και το Moment.js

Καλώς ορίσατε στον απόλυτο οδηγό μας για το Dateαντικείμενο JavaScript και το Moment.js. Αυτό το σεμινάριο θα σας διδάξει όλα όσα πρέπει να γνωρίζετε για την εργασία με ημερομηνίες και ώρες στα έργα σας.

Πώς να δημιουργήσετε ένα Dateαντικείμενο

Λάβετε την τρέχουσα ημερομηνία και ώρα

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

Λάβετε ημερομηνία και ώρα με μεμονωμένες τιμές

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

Η σύνταξη είναι Date(year, month, day, hour, minute, second, millisecond).

Σημειώστε ότι οι μήνες έχουν μηδενικό δείκτη, ξεκινώντας από τον Ιανουάριο στο 0 και τελειώνουν με τον Δεκέμβριο στις 11.

Λάβετε ημερομηνία και ώρα από μια χρονική σήμανση

const unixEpoch = new Date(0);

Αυτό αντιπροσωπεύει την ώρα την Πέμπτη, 1 Ιανουαρίου 1970 (UTC) ή την ώρα Unix Epoch. Το Unix Epoch είναι σημαντικό γιατί είναι αυτό που χρησιμοποιούν το JavaScript, το Python, το PHP και άλλες γλώσσες και συστήματα για τον υπολογισμό της τρέχουσας ώρας.

new Date(ms) επιστρέφει την ημερομηνία της εποχής συν τον αριθμό χιλιοστών του δευτερολέπτου που περνάτε. Σε μια μέρα υπάρχουν 86.400.000 χιλιοστά του δευτερολέπτου έτσι:

const dayAfterEpoch = new Date(86400000);

θα επιστρέψει την Παρασκευή, 2 Ιανουαρίου 1970 (UTC).

Λάβετε μια ημερομηνία και ώρα από μια συμβολοσειρά

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

Η λήψη της ημερομηνίας με αυτόν τον τρόπο είναι πολύ ευέλικτη. Όλα τα παρακάτω παραδείγματα επιστρέφουν έγκυρα Dateαντικείμενα:

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')

Μπορείτε επίσης να χρησιμοποιήσετε τη Date.parse()μέθοδο για να επιστρέψετε τον αριθμό χιλιοστών του δευτερολέπτου από την εποχή (1η Ιανουαρίου 1970):

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

Ρύθμιση ζώνης ώρας

Όταν περνάτε μια συμβολοσειρά ημερομηνιών χωρίς να ορίσετε μια ζώνη ώρας, το JavaScript υποθέτει ότι η ημερομηνία / ώρα είναι σε UTC πριν τη μετατρέψει στη ζώνη ώρας του προγράμματος περιήγησής σας:

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)

Αυτό μπορεί να οδηγήσει σε σφάλματα όπου η ημερομηνία που επιστρέφεται είναι πολύωρη. Για να το αποφύγετε αυτό, περάστε σε μια ζώνη ώρας μαζί με τη συμβολοσειρά:

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'); */

Μπορείτε επίσης να περάσετε μερικούς, αλλά όχι όλους, κωδικούς ζώνης ώρας:

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 Μέθοδοι αντικειμένου

Συχνά δεν θα χρειαστείτε ολόκληρη την ημερομηνία, αλλά μόνο μέρος της όπως την ημέρα, την εβδομάδα ή τον μήνα. Ευτυχώς, υπάρχουν αρκετές μέθοδοι για να κάνετε ακριβώς αυτό:

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)

Κάντε Ευκολότερη την Εργασία με Ημερομηνίες με το Moment.js

Η σωστή ημερομηνία και ώρα δεν είναι μικρή δουλειά. Κάθε χώρα φαίνεται να έχει έναν διαφορετικό τρόπο μορφοποίησης ημερομηνιών και η λογιστική καταχώριση διαφορετικών ζωνών ώρας και θερινής ώρας / θερινής ώρας χρειάζεται, πολύ, πολύς χρόνος. Εκεί λάμπει το Moment.js - κάνει την ανάλυση, τη μορφοποίηση και την εμφάνιση των ημερομηνιών ένα αεράκι.

Για να ξεκινήσετε να χρησιμοποιείτε το Moment.js, εγκαταστήστε το μέσω ενός διαχειριστή πακέτων όπως npmή προσθέστε το στον ιστότοπό σας μέσω ενός CDN. Δείτε την τεκμηρίωση του Moment.js για περισσότερες λεπτομέρειες.

Λάβετε την τρέχουσα ημερομηνία και ώρα με το Moment.js

const now = moment();

Αυτό επιστρέφει ένα αντικείμενο με την ημερομηνία και την ώρα με βάση την τοποθεσία του προγράμματος περιήγησής σας, μαζί με άλλες τοπικές πληροφορίες. Είναι παρόμοιο με αυτό των εγγενών JavaScript new Date().

Λάβετε μια ημερομηνία και ώρα από μια χρονική σήμανση με το Moment.js

Παρόμοια με new Date(ms), μπορείτε να περάσετε τον αριθμό χιλιοστών του δευτερολέπτου από την εποχή σε moment():

const dayAfterEpoch = moment(86400000);

Εάν θέλετε να λάβετε μια ημερομηνία χρησιμοποιώντας μια χρονική σήμανση Unix σε δευτερόλεπτα, μπορείτε να χρησιμοποιήσετε τη unix()μέθοδο:

const dayAfterEpoch = moment.unix(86400);

Λάβετε μια ημερομηνία και ώρα από μια συμβολοσειρά με το Moment.js

Η ανάλυση μιας ημερομηνίας από μια συμβολοσειρά με το Moment.js είναι εύκολη και η βιβλιοθήκη δέχεται συμβολοσειρές με τη μορφή ημερομηνίας ώρας ISO 8601 ή RFC 2822, μαζί με οποιαδήποτε συμβολοσειρά αποδεκτή από το Dateαντικείμενο JavaScript .

Οι συμβολοσειρές ISO 8601 συνιστώνται, καθώς είναι ευρέως αποδεκτή μορφή Ορίστε μερικά παραδείγματα:

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

Ορισμός ζώνης ώρας με το 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:

Input Output Description
YYYY 2019 4 digit year
YY 19 2 digit year
MMMM August Full month name
MMM Aug Abbreviated month name
MM 08 2 digit month
M 8 1 digit month
DDD 225 Day of the year
DD 13 Day of the month
Do 13th Day of the month with ordinal
dddd Wednesday Full day name
ddd Wed Abbreviated day name
HH 17 Hours in 24 hour time
hh 05 Hours in 12 hour time
mm 32 Minutes
ss 19 Seconds
a am / pm Ante or post meridiem
A AM / PM Capitalized ante or post meridiem
ZZ +0900 Timezone offset from UTC
X 1410715640.579 Unix timestamp in seconds
XX 1410715640579 Unix timestamp in milliseconds

Ανατρέξτε στα έγγραφα Moment.js για περισσότερα διακριτικά μορφοποίησης.

Η εργασία με Dateαντικείμενα JavaScript και Moment.js δεν χρειάζεται να είναι χρονοβόρα. Τώρα θα πρέπει να γνωρίζετε περισσότερα από αρκετά για να ξεκινήσετε και με τα δύο.