Le guide ultime de JavaScript Date et Moment.js

Bienvenue dans notre guide ultime sur l' Dateobjet JavaScript et Moment.js. Ce didacticiel vous apprendra tout ce que vous devez savoir sur l'utilisation des dates et des heures dans vos projets.

Comment créer un Dateobjet

Obtenez la date et l'heure actuelles

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

Obtenez une date et une heure avec des valeurs individuelles

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

La syntaxe est Date(year, month, day, hour, minute, second, millisecond).

Notez que les mois sont indexés à zéro, commençant par janvier à 0 et se terminant par décembre à 11.

Obtenir une date et une heure à partir d'un horodatage

const unixEpoch = new Date(0);

Cela représente l'heure du jeudi 1er janvier 1970 (UTC) ou l'heure de l'époque Unix. L'époque Unix est importante car c'est ce que JavaScript, Python, PHP et d'autres langages et systèmes utilisent en interne pour calculer l'heure actuelle.

new Date(ms) renvoie la date de l'époque plus le nombre de millisecondes que vous passez. Dans une journée, il y a 86 400 000 millisecondes donc:

const dayAfterEpoch = new Date(86400000);

sera de retour le vendredi 2 janvier 1970 (UTC).

Obtenir une date et une heure à partir d'une chaîne

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

Obtenir la date de cette façon est très flexible. Tous les exemples ci-dessous renvoient des Dateobjets valides :

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

Vous pouvez également utiliser la Date.parse()méthode pour renvoyer le nombre de millisecondes depuis l'époque (1er janvier 1970):

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

Définition d'un fuseau horaire

Lorsque vous passez une chaîne de date sans définir de fuseau horaire, JavaScript suppose que la date / l'heure sont en UTC avant de la convertir dans le fuseau horaire de votre navigateur:

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)

Cela peut entraîner des erreurs où la date renvoyée est décalée de plusieurs heures. Pour éviter cela, indiquez un fuseau horaire avec la chaîne:

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

Vous pouvez également transmettre certains codes de fuseau horaire, mais pas tous:

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 Méthodes objet

Souvent, vous n'aurez pas besoin de la date entière, mais juste d'une partie comme le jour, la semaine ou le mois. Heureusement, il existe un certain nombre de méthodes pour y parvenir:

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)

Facilitez le travail avec les dates avec Moment.js

Obtenir des dates et des heures correctes n'est pas une mince affaire. Chaque pays semble avoir une manière différente de formater les dates, et la prise en compte des différents fuseaux horaires et de l'heure d'été / heure d'été prend, eh bien, beaucoup de temps. C'est là que Moment.js brille - il facilite l'analyse, le formatage et l'affichage des dates.

Pour commencer à utiliser Moment.js, installez-le via un gestionnaire de packages comme npm, ou ajoutez-le à votre site via un CDN. Consultez la documentation Moment.js pour plus de détails.

Obtenez la date et l'heure actuelles avec Moment.js

const now = moment();

Cela renvoie un objet avec la date et l'heure en fonction de l'emplacement de votre navigateur, ainsi que d'autres informations locales. C'est similaire au JavaScript natif new Date().

Obtenez une date et une heure à partir d'un horodatage avec Moment.js

Similaire à new Date(ms), vous pouvez passer le nombre de millisecondes depuis l'époque à moment():

const dayAfterEpoch = moment(86400000);

Si vous souhaitez obtenir une date en utilisant un horodatage Unix en secondes, vous pouvez utiliser la unix()méthode:

const dayAfterEpoch = moment.unix(86400);

Obtenir une date et une heure à partir d'une chaîne avec Moment.js

L'analyse d'une date à partir d'une chaîne avec Moment.js est facile et la bibliothèque accepte les chaînes au format Date Heure ISO 8601 ou RFC 2822, ainsi que toute chaîne acceptée par l' Dateobjet JavaScript .

Les chaînes ISO 8601 sont recommandées car il s'agit d'un format largement accepté. Voici quelques exemples:

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

Définition d'un fuseau horaire avec 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.