Comprendre la date et l'heure en JavaScript

Introduction

La date et l’heure font partie de nos vies quotidiennes et occupent donc une place importante dans la programmation informatique. En JavaScript, vous aurez éventuellement à créer un site Internet avec un calendrier, un programme de formation ou une interface de prise de rendez-vous. Ces applications doivent afficher des heures applicables en fonction de la zone horaire actuelle de l’utilisateur, ou effectuer des calculs sur les heures d’arrivée et de départ ou de démarrage et de fin. En outre, vous devrez utiliser JavaScript pour générer un rapport quotidien à un certain moment la journée ou appliquer un filtre pour obtenir les restaurants et les établissements actuellement ouverts.

Pour atteindre tous ces objectifs et plus encore, JavaScript intègre l’objet Date et les méthodes connexes. Dans ce tutoriel, vous allez apprendre à formater et utiliser la date et l’heure en JavaScript.

L’objet Date

L’objet Date est un objet intégré en JavaScript qui stocke la date et l’heure. Il offre un certain nombre de méthodes intégrées de formater et de gérer ces données.

Par défaut, une nouvelle instance Date sans arguments crée un objet correspondant à la date et à l’heure actuelle. Il sera créé en fonction des paramètres du système de l’ordinateur actuellement utilisé.

Pour expliquer l’objet Date en JavaScript, créons une variable et attribuons-lui la date du jour. Cet article a été rédigé le mercredi 18 octobre à Londres (GMT). Il s’agit donc de la date, de l’heure et du fuseau horaire actuels qui sont utilisés ci-dessous.

// Set variable to current date and time
const now = new Date();

// View the output
now;

Output
Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)

En examinant la sortie, nous voyons que nous disposons d’une chaîne de date contenant les éléments suivants :

La date et l’heure sont décomposées et imprimées de manière compréhensible par l’humain.

Cependant, JavaScript comprend la date en se basant sur un timestamp dérivé d’Unix time qui est une valeur composée du nombre de millisecondes passées depuis le 1er janvier 1970. Nous pouvons obtenir the en utilisant la méthode getTime().

// Get the current timestamp
now.getTime()

Output
1508330494000

Le grand nombre qui apparaît dans notre résultat pour l’horodatage actuel représente la même valeur que celle ci-dessus, le 18 octobre 2017.

L’heure Epoch est également appelée notice nemo, représentée par la chaîne de date 01 janvier, 1970 00:00:00 Universal Time (UTC) et par la 0. Nous pouvons tester cela dans le navigateur en créant une nouvelle variable et en l’assignant à une nouvelle instance Date sur la base d’un horadatage de 0.

// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);

epochTime;

Output
01 January, 1970 00:00:00 Universal Time (UTC)

L’heure Epoch a été choisie comme standard pour les ordinateurs qui permettent de mesurer le temps par les jours précédents de la programmation. Il est important de comprendre le concept de l’horodatage et de la chaîne de date, car les deux peuvent être utilisés en fonction des paramètres et de l’objectif d’une application.

Pour le moment, nous avons appris à créer une nouvelle instance Date en fonction de l’heure actuelle et à en créer une en fonction d’un horodatage. Au total, il existe quatre formats par lesquels vous pouvez créer une nouvelle Date en JavaScript. En plus de l’heure par défaut et de l’horodatage actuelle, vous pouvez également utiliser une chaîne de date ou spécifier des dates et des heures particulières.

Pour expliquer les différentes manières de faire référence à une date spécifique, nous allons créer de nouveaux objets Date qui représenteront le 4 juillet 1776, 12 h 30 GMT de trois manières différentes.

// Timestamp method
new Date(-6106015800000);

// Date string method
new Date("January 31 1980 12:30");

// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);

Les trois exemples ci-dessus créent une date contenant les mêmes informations.

Vous remarquerez que la méthode de l’horodatage a un numéro négatif.

Dans la méthode date et time, nos secondes et millisecondes sont configurées sur 0. Si un numéro est absent de la création de Date, un 0 sera renseigné par défaut. Cependant, l’ordre ne peut être modifié. Gardez donc cela en tête si vous décidez de retirer un numéro. Vous remarquerez également que le mois de juillet est représenté par un 6, non pas par le 7 habituel. En effet, les numéros pour la date et l’heure commencent à partir du 0, comme la plupart des éléments de programmation. Consultez le tableau détaillé donné à la section suivante.

Récupérer la Date avec get

Une fois que nous avons une date, nous pouvons accéder à tous les composants de la date avec diverses méthodes intégrées. Les méthodes retourneront chaque partie de la date en fonction du fuseau horaire local. Chacune de ces méthodes commence par get et renvoie le numéro correspondant. Le tableau ci-dessous détaille les méthodes get de l’objet Date.

Créons une nouvelle date, sur la base du 31 juillet 1980 et attribuons-lui une variable.

// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);

Maintenant, nous pouvons utiliser toutes nos méthodes pour obtenir chaque composant de la date, de l’année à la milliseconde.

birthday.getFullYear();      // 1980
birthday.getMonth();         // 6
birthday.getDate();          // 31
birthday.getDay();           // 4
birthday.getHours();         // 0
birthday.getMinutes();       // 0
birthday.getSeconds();       // 0
birthday.getMilliseconds();  // 0
birthday.getTime();          // 333849600000 (for GMT)

Vous aurez parfois besoin d’extraire une seule partie d’une date. Pour cela, vous pouvez utiliser les méthodes get intégrées, les outils que vous pouvez utiliser pour y remédier.

Pour illustrer cela par un exemple, nous pouvons tester la date actuelle par rapport au jour et au mois du 3 octobre pour vérifier s’il s’agit bien du 3 octobre ou pas.

// Get today's date
const today = new Date();

// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
  console.log("It's October 3rd.");
} else {
  console.log("It's not October 3rd.");
}

Output
It's not October 3rd.

Étant donné qu’au moment de l’écriture nous ne sommes pas le 3 octobre, la console l’indique.

Les méthodes Date intégrées qui commencent par nous get nous permettent d’accéder aux composants de la date qui renvoient le numéro associé à ce que nous récupérons à partir de l’objet instancié.

Modifier la Date avec set

Pour toutes les méthodes get que nous avons abordées ci-dessus, il existe une méthode set correspondante. Lorsque vous utilisez get pour récupérer un composant spécifique à partir d’une date, set vous permet de modifier les composants d’une date. Le tableau ci-dessous détaille les méthodes set de l’objet Date.

Nous pouvons utiliser ces méthodes set pour modifier un, plusieurs ou tous les composants d’une date. Par exemple, nous pouvons modifier l’année de notre variable birthday ci-dessus en remplaçant 1980 par 1997.

// Change year of birthday date
birthday.setFullYear(1997);

birthday;

Output
Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)

Dans l’exemple ci-dessus, nous pouvons voir que lorsqu’on appelle la variable birthday, le résultat que nous recevons comporte la nouvelle année.

Les méthodes intégrées commençant par set nous permettent de modifier différentes parties d’un objet Date.

Méthodes de Date avec UTC

Les méthodes get discutées ci-dessus récupèrent les composants de la date en fonction des paramètres du fuseau horaire de l’utilisateur. Pour avoir un meilleur contrôle sur les dates et les heures, vous pouvez utiliser les méthodes getUTC, qui sont exactement les mêmes que les méthodes get, à la différence qu’elles calculent l’heure en fonction de la norme UTC (Coordinated Universal Time). Le tableau ci-dessous répertorie les méthodes UTC pour l’objet Date en JavaScript.

Vous pouvez exécuter le code suivant pour tester la différence entre les méthodes Get locales et UTC.

// Assign current time to a variable
const now = new Date();

// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());

En exécutant ce code, le système imprimera l’heure actuelle et l’heure au fuseau horaire UTC. Si vous êtes actuellement dans le fuseau horaire UTC, les valeurs que vous obtiendrez après l’exécution du programme ci-dessus seront les mêmes.

UTC est utile dans le sens où il offre une référence internationale standard de l’heure et vous permet de préserver une certaine cohérence dans les codes utilisés par rapport aux fuseaux horaires si cela est applicable à ce que vous développez.

Conclusion

Au cours de ce tutoriel, nous avons appris à créer une instance de l’objet Date et à utiliser ses méthodes intégrées pour accéder et modifier les composants d’une date spécifique. Pour mieux comprendre les dates et les heures en JavaScript, vous pouvez lire la référence Date sur le réseau de développement Mozilla.

Pour exécuter de nombreuses tâches courantes en JavaScript, il est essentiel que vous sachiez comment travailler avec les dates. Vous pourrez alors faire plusieurs choses, que ce soit pour configurer l’exécution répétitive de rapports ou afficher les dates et les calendriers dans le fuseau horaire applicable.