JavaScript : Dates et heures
Comprendre et manipuler les dates et heures en JavaScript est essentiel pour créer des applications web dynamiques. Découvrez l'objet Date.
Introduction à l'objet Date de JavaScript
Comprendre et manipuler les dates et les heures est essentiel pour créer des applications web dynamiques. JavaScript propose un objet Date intégré pour gérer ces tâches. Ce guide explique comment créer des dates, lire et modifier leurs composantes, les formater et effectuer des calculs — avec des exemples exécutables tout au long.
En interne, un Date n'est qu'un simple nombre : le nombre de millisecondes écoulées depuis l'époque Unix (00:00:00 UTC le 1er janvier 1970). Toutes les autres fonctionnalités reposent sur ce seul nombre, ce qui ramène une grande partie de la logique de dates à de simples calculs sur des nombres.
Créer des objets Date
Il existe quatre façons courantes d'instancier un Date, chacune adaptée à un type d'entrée différent.
// 1. Current date and time (no arguments)
const now = new Date();
// 2. From a millisecond timestamp (epoch = 0)
const epoch = new Date(0); // 1970-01-01T00:00:00.000Z
// 3. From a date string (ISO 8601 is the only reliably portable format)
const parsed = new Date("2024-01-01T00:00:00");
// 4. From individual components: year, monthIndex, day, hours, minutes, seconds
const detailed = new Date(2024, 0, 1, 15, 30, 0); // Jan 1, 2024, 15:30:00Le mois est indexé à partir de 0. Dans la forme avec composantes, janvier vaut 0, février 1, … décembre 11. Le jour du mois, en revanche, est indexé à partir de 1. Ce décalage d'un rang est l'erreur la plus fréquente avec Date. Le même indexage à 0 s'applique à getMonth() et setMonth().
Analyse des chaînes ISO vs autres formats
Seul le format ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ) est garanti d'être analysé de la même façon dans tous les moteurs. Une chaîne de date brute comme "2024-01-01" est interprétée comme minuit UTC, tandis que "2024-01-01T00:00:00" (sans Z) est traitée comme heure locale. Les autres formats (par exemple "01/02/2024") dépendent de l'implémentation — évitez-les.
Récupérer les composantes de date et d'heure
Une fois que vous avez un Date, vous pouvez lire chaque partie avec une méthode get*. Ces méthodes retournent des valeurs en heure locale (voir Travailler avec les fuseaux horaires pour les variantes UTC).
Définir les composantes de date et d'heure
Chaque méthode get* possède une méthode set* correspondante qui modifie la date en place. Les objets Date sont mutables — set* modifie l'original plutôt que de retourner une nouvelle date.
Autocorrection (le dépassement se reporte)
Si vous définissez une valeur hors limites, Date la normalise silencieusement — aucune erreur n'est levée. Définir le jour 32 de janvier fait avancer la date en février. Cela est réellement utile pour les calculs : pour ajouter 5 jours, il suffit d'ajouter 5 à getDate() et de laisser la date se reporter.
Horodatages : getTime et Date.now
getTime() retourne la date sous forme d'horodatage en millisecondes, et la méthode statique Date.now() retourne l'horodatage actuel sans créer d'objet. Les horodatages sont le moyen le plus simple de comparer des dates ou de mesurer le temps écoulé.
Travailler avec les fuseaux horaires
Un Date stocke un instant UTC unique ; les méthodes get* le lisent dans le fuseau horaire local de l'hôte. Utilisez les variantes getUTC* pour lire la valeur UTC, et l'API Intl (via toLocaleString) pour afficher dans n'importe quel autre fuseau.
Formater les dates et heures
Pour produire une chaîne lisible par les machines, utilisez toISOString() ; pour un affichage lisible par l'humain, toLocaleDateString() / toLocaleTimeString() respectent la locale de l'utilisateur. Pour un format entièrement personnalisé, assemblez les parties vous-même (en n'oubliant pas getMonth() + 1).
toISOString() est exactement ce que JSON.stringify utilise pour les dates, donc un Date survit à un aller-retour en texte et retour. Voir Travailler avec JSON pour savoir comment reconvertir des chaînes ISO en objets Date.
Explorez les bibliothèques modernes de dates : bien que l'objet Date natif de JavaScript offre une gestion de base des dates, des bibliothèques comme date-fns et Luxon proposent des utilitaires robustes pour les calculs complexes, l'internationalisation et la gestion des fuseaux horaires. Moment.js est officiellement déprécié ; préférez ces alternatives modernes pour les nouveaux projets.
Calculs et différences de dates
Parce qu'un Date n'est qu'un nombre en interne, soustraire une date d'une autre donne la différence en millisecondes. L'opérateur de soustraction convertit chaque date via getTime(), donc endDate - startDate fonctionne directement. Divisez par le nombre de millisecondes dans une journée pour obtenir un nombre de jours.
Pour ajouter du temps, préférez la mutation avec set* (qui gère correctement les dépassements de mois/année) à l'ajout de millisecondes brutes, qui ignore les changements d'heure d'été.
Utiliser des bibliothèques pour les manipulations avancées
Pour des manipulations et des formatages de dates plus complexes, plusieurs bibliothèques peuvent simplifier ces tâches. Des bibliothèques telles que date-fns et Luxon offrent des fonctionnalités étendues au-delà de l'objet Date natif, facilitant l'analyse, l'internationalisation et la gestion complexe des fuseaux horaires. Par ailleurs, l'API Temporal est actuellement en cours de développement pour remplacer à terme l'objet Date natif par une solution plus robuste, immuable et consciente des fuseaux horaires.
Conclusion
Maîtriser l'objet Date en JavaScript est essentiel pour développer des applications web dynamiques qui interagissent efficacement avec les dates et les heures. En créant, récupérant, définissant et formatant des dates, les développeurs peuvent construire des fonctionnalités sophistiquées qui répondent au temps réel. Qu'il s'agisse de planifier des événements, de calculer des durées ou d'afficher des chronologies, les capacités offertes par l'objet Date de JavaScript et les diverses bibliothèques tierces font de la manipulation des dates et des heures un outil puissant dans votre arsenal de développement web.