`Objet` Date

Cet article explique l'objet Date.

Nous expliquerons l'objet Date étape par étape, des mécanismes de base aux opérations couramment utilisées en pratique, avec des exemples concrets.

YouTube Video

Objet Date

Qu'est-ce que l'objet Date ?

L'objet Date en JavaScript est un objet standard pour gérer les dates et les heures. En interne, il gère la date et l'heure en se basant sur le nombre de millisecondes écoulées depuis le 1er janvier 1970 à 00:00:00 UTC.

Tout d'abord, créons un objet Date représentant la date et l'heure actuelles, et vérifions son contenu.

1const now = new Date();
2console.log(now);

• Ce code crée un objet Date représentant la date et l'heure actuelles au moment de l'exécution. Le format d'affichage dépend de l'environnement d'exécution, comme le navigateur ou le système d'exploitation.

Comment créer un objet Date

Les objets Date peuvent être créés de plusieurs façons selon vos besoins. Un point particulièrement important, facile à se tromper, est que l'argument du constructeur pour le mois commence à zéro, ce qui signifie que les mois commencent à 0.

1const d1 = new Date();                     // Current date and time
2const d2 = new Date("2025-01-01");         // Create from an ISO date string
3const d3 = new Date(2025, 0, 1);           // January 1, 2025 (month is zero-based)
4const d4 = new Date(2025, 0, 1, 10, 30);   // January 1, 2025, 10:30
5
6console.log(d1, d2, d3, d4);

• Dans new Date(year, month, day), le paramètre month signifie que 0 est janvier et 11 est décembre. Si vous ne comprenez pas cette spécification, vous risquez de créer une date décalée d'un mois par erreur, donc faites toujours attention.

Récupérer chaque élément de la date et de l'heure

Vous pouvez extraire individuellement l'année, le mois, le jour, l'heure et le jour de la semaine à partir d'un objet Date. Toutes les méthodes d'accès renvoient les valeurs sous forme de nombres.

1const date = new Date();
2
3console.log(date.getFullYear()); // Year
4console.log(date.getMonth());    // Month (0-based: 0 = January)
5console.log(date.getDate());     // Day of the month
6console.log(date.getHours());    // Hours
7console.log(date.getMinutes());  // Minutes
8console.log(date.getSeconds());  // Seconds
9console.log(date.getDay());      // Day of the week (0 = Sunday, 6 = Saturday)

• Comme pour la création, faites attention car getMonth() commence également à zéro. Lorsque vous l'utilisez pour l'affichage, il est courant d'ajouter 1 pour ajuster la valeur.
• getDay() renvoie le jour de la semaine sous forme de nombre. 0 représente le dimanche et 6 représente le samedi.

Modification des dates et des heures

Date est un objet mutable, ce qui signifie que vous pouvez modifier ses valeurs par la suite. Cette propriété est utile, mais vous devez faire attention aux effets secondaires indésirables.

Vous pouvez utiliser les méthodes set pour modifier les valeurs d'un objet Date existant.

1const date = new Date("2025-01-01");
2
3date.setFullYear(2026);
4date.setMonth(5);   // June
5date.setDate(15);
6
7console.log(date);

• setMonth() commence également à zéro. L'objet original est modifié directement.

Ajouter et soustraire des dates

Il est courant d'effectuer des calculs de dates en utilisant les millisecondes ou en utilisant setDate(). Pour les calculs basés sur les jours, l'utilisation de setDate() est particulièrement intuitive et sûre.

1const date = new Date("2025-01-01");
2
3date.setDate(date.getDate() + 7);
4console.log(date);

• Dans cet exemple, nous calculons la date 7 jours après la date spécifiée. Même si l'ajout dépasse dans un nouveau mois, il est automatiquement ajusté.

Comparer des objets Date

Les objets Date peuvent être comparés comme des nombres. Ceci est dû au fait que la valeur interne en millisecondes est comparée.

1const a = new Date("2025-01-01");
2const b = new Date("2025-01-10");
3
4console.log(a < b);   // true
5console.log(a > b);   // false

• Si vous voulez déterminer l'ordre des dates, aucune conversion supplémentaire n'est nécessaire. Vous pouvez utiliser directement les opérateurs de comparaison.

Travailler avec les timestamps (millisecondes)

Date peut être converti vers et depuis des valeurs numériques représentant des millisecondes (timestamps). Ce format est fréquemment utilisé dans les APIs ou les intégrations avec des bases de données.

1const now = Date.now();
2console.log(now);
3
4const date = new Date(now);
5console.log(date);

• Date.now() renvoie l'heure actuelle en millisecondes. Cela est très utile lorsque vous souhaitez stocker ou comparer la valeur sous forme de nombre.

Formater des dates sous forme de chaînes

Afficher un objet Date tel quel aboutit souvent à un format qui ne convient pas toujours à vos besoins. Par conséquent, vous devez le formater explicitement selon vos besoins.

1const date = new Date("2025-01-01");
2
3const formatted = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
4console.log(formatted);

• En le formatant manuellement de cette façon, vous pouvez totalement contrôler le format d'affichage. En pratique, on utilise souvent des bibliothèques dédiées pour cet objectif.

Différence entre UTC et l'heure locale

Date fournit des méthodes pour gérer aussi bien l'heure locale que l'UTC. Il est important de bien comprendre cette différence pour l'intégration avec les serveurs et la compatibilité internationale.

1const date = new Date();
2
3console.log(date.getHours());    // Local time (hours)
4console.log(date.getUTCHours()); // UTC time (hours)

• Les méthodes getUTC* renvoient toujours des valeurs basées sur l'UTC. Soyez particulièrement vigilant lors du traitement de données traversant plusieurs fuseaux horaires.

Précautions lors de l'utilisation des objets Date

Date est pratique, mais il présente aussi des aspects délicats. En particulier, le mois à base zéro et la mutabilité de l'objet sont des causes fréquentes de bugs.

Regardons ci-dessous des exemples concrets pour voir les conséquences du fait que Date est mutable.

1const original = new Date("2025-01-01");
2const copy = new Date(original);
3
4copy.setDate(10);
5
6console.log(original);
7console.log(copy);

• Si vous souhaitez conserver la date et l'heure d'origine, pensez toujours à créer une copie. Le simple fait d'en être conscient vous aidera à éviter des bugs involontaires.

Les raisons pour lesquelles Date est difficile à manipuler et les critères d'utilisation des bibliothèques

L'objet Date offre des fonctionnalités suffisantes en tant que fonction standard, mais il existe des situations où il peut être difficile à utiliser en pratique. Les problèmes courants incluent le fait que les mois et les jours de la semaine commencent par zéro, la tendance à confondre l'heure locale et l'UTC, ainsi que la mutabilité de l'objet. Ces problèmes peuvent entraîner davantage de bugs à mesure que le traitement des dates augmente.

Date suffit pour de simples récupérations et comparaisons de dates, mais la lisibilité et la maintenabilité du code tendent à diminuer avec des calculs de dates ou des formatages d'affichage plus complexes.

Si vous avez des besoins comme ceux ci-dessous, vous devriez envisager d'utiliser des bibliothèques légères de gestion de dates comme dayjs ou date-fns.

• Vous devez gérer explicitement les fuseaux horaires.
• Vous devez souvent effectuer des calculs sur les dates ou les intervalles.
• Vous souhaitez modifier le format d'affichage de manière flexible.
• Vous souhaitez manipuler les dates et heures de façon immuable.

Résumé

Les objets Date sont l'outil fondamental pour gérer la date et l'heure en JavaScript. En comprenant ses particularités et en procédant correctement à sa création, récupération, calcul et mise en forme, vous pourrez l'utiliser en toute sécurité dans des cas réels.

Après avoir maîtrisé les bases, utiliser des bibliothèques de dates selon les besoins est un choix pragmatique.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video