Presque tous les types d'applications écrites en JavaScript fonctionnent avec des heures ou des dates dans une certaine mesure. Au début, cela se limitait à l'API Date intégrée. Cette API inclut des fonctionnalités de base, mais est assez limitée dans ce qu'elle peut faire. Les bibliothèques tierces comme Moment.js, et les API intégrées ultérieures telles que les API Intl et la nouvelle API Temporal, ajoutent une plus grande flexibilité dans le travail avec les heures et les dates. La montée et la chute de Moment.js Moment.js est une bibliothèque JavaScript dotée de puissants utilitaires permettant de travailler avec les heures et les dates. Il inclut des fonctionnalités manquantes de l'API Date de base, telles que la manipulation du fuseau horaire, et simplifie de nombreuses opérations courantes. Moment comprend également des fonctions de formatage des dates et des heures. C'est devenu une bibliothèque largement utilisée dans de nombreuses applications différentes. Cependant, Moment a également eu son lot de problèmes. Il s’agit d’une grande bibliothèque qui peut augmenter considérablement la taille du bundle d’une application. Étant donné que la bibliothèque ne prend pas en charge le tremblement d'arborescence (une fonctionnalité des bundles modernes qui peut supprimer les parties inutilisées des bibliothèques), l'intégralité de la bibliothèque Moment est incluse même si vous n'utilisez qu'une ou deux de ses fonctions. Un autre problème avec Moment est le fait que les objets qu'il crée sont modifiables. L'appel de certaines fonctions sur un objet Moment a des effets secondaires et modifie la valeur de cet objet. Cela peut entraîner un comportement inattendu ou des bugs. En 2020, les responsables de Moment ont décidé de mettre la bibliothèque en mode maintenance. Aucun développement de nouvelles fonctionnalités n'est en cours et les responsables recommandent de ne pas l'utiliser pour de nouveaux projets. Il existe d'autres bibliothèques de dates JavaScript, telles que date-fns, mais il y a un nouvel acteur en ville, une API directement intégrée à JavaScript : Temporal. Il s'agit d'une nouvelle norme qui comble les lacunes de l'API Date d'origine et résout certaines des limitations trouvées dans Moment et d'autres bibliothèques. Qu’est-ce que le temporel ? Temporal est une nouvelle API d'heure et de date ajoutée à la norme ECMAScript, qui définit le JavaScript moderne. En mars 20266, il a atteint l'étape 4 du processus TC39 (le comité qui supervise les propositions et les ajouts au langage JavaScript) et sera inclus dans la prochaine version de la spécification ECMAScript. Il a déjà été implémenté dans plusieurs navigateurs : Chrome 144+ et Firefox 139+, et Safari devrait bientôt suivre. Un polyfill est également disponible pour les navigateurs non pris en charge et Node.js. L'API Temporelle crée des objets qui, généralement, représentent des moments dans le temps. Il peut s'agir d'horodatages à temps plein et d'horodatage dans un fuseau horaire donné, ou d'une instance générique d'une « horloge murale » sans aucune information de fuseau horaire ou de date. Certaines des principales fonctionnalités de Temporal incluent :
Heures avec ou sans dates. Un objet temporel peut représenter une heure spécifique à une date spécifique, ou une heure sans aucune information de date. Une date précise, sans heure, peut également être représentée. Prise en charge du fuseau horaire. Les objets temporels sont entièrement conscients du fuseau horaire et peuvent être convertis en différents fuseaux horaires. Moment prend également en charge les fuseaux horaires, mais il nécessite la bibliothèque supplémentaire moment-timezone. Immuabilité. Une fois qu’un objet temporel est créé, il ne peut pas être modifié. Les conversions arithmétiques temporelles ou de fuseau horaire ne modifient pas l'objet sous-jacent. Au lieu de cela, ils génèrent un nouvel objet temporel. Indexation basée sur 1. Une source courante de bugs avec l'API Date (ainsi qu'avec Moment) est que les mois sont indexés à zéro. Cela signifie que janvier est le mois 0, plutôt que le mois 1 comme nous le comprenons tous dans la vraie vie. Temporal corrige ce problème en utilisant une indexation basée sur 1 : janvier est le mois 1. Il est intégré au navigateur. Puisque Temporal est une API dans le navigateur lui-même, elle n’ajoute rien à la taille du bundle de votre application.
Il est également important de noter que l’API Date ne va pas disparaître. Bien que Temporal remplace cette API, elle n’est ni supprimée ni obsolète. De nombreuses applications tomberaient en panne si les navigateurs supprimaient soudainement l'API Date. Cependant, gardez également à l’esprit que Moment est désormais considéré comme un projet hérité en mode maintenance. Dans le reste de l'article, nous examinerons quelques « recettes » pour migrer le code basé sur Moment vers la nouvelle API Temporal. Commençons à refactoriser ! Création d'objets de date et d'heure Avant de pouvoir manipuler les dates et les heures, nous devons créer des objets qui les représentent. Pour créer un objet Moment représentant la date et l'heure actuelles, utilisez la fonction moment. const maintenant = moment(); console.log (maintenant); // Instant<2026-02-18T21:26:29-05:00>
Cet objet peut désormais être formaté ou manipulé selon les besoins.
// conversion en UTC //avertissement : cela mute l'objet Moment et le met en mode UTC ! console.log(maintenant.utc()); // Instant<2026-02-19T02:26:29Z>
// affiche une chaîne formatée - notez qu'elle utilise désormais l'heure UTC console.log(now.format('MM/JJ/AAAA hh:mm:ss a')); // 19/02/2026 02:27:07
L’élément clé à retenir à propos de Moment est qu’un objet Moment inclut toujours des informations sur l’heure et la date. Si vous avez uniquement besoin de travailler avec des informations temporelles, cela convient généralement, mais cela peut entraîner un comportement inattendu dans des situations telles que l'heure d'été ou les années bissextiles, où la date peut avoir un effet sur les calculs de l'heure. Le temporel est plus flexible. Vous pouvez créer un objet représentant la date et l'heure actuelles en créant un objet Temporal.Instant. Cela représente un moment défini par le temps depuis « l’époque » (minuit UTC le 1er janvier 1970). Temporal peut référencer cet instant dans le temps avec une précision de l’ordre de la nanoseconde. const maintenant = Temporal.Now.instant();
// voir les nanosecondes brutes depuis l'époque console.log(maintenant.epochNanoseconds); // 1771466342612000000n
// format pour UTC console.log(maintenant.toString()); // 2026-02-19T01:55:27.844Z
// format pour un fuseau horaire particulier console.log(now.toString({ timeZone : 'America/New_York' })); // 2026-02-18T20:56:57.905-05:00
Les objets Temporal.Instant peuvent également être créés pour une heure et une date spécifiques à l’aide de la méthode from static.
const monInstant = Temporal.Instant.from('2026-02-18T21:10:00-05:00');
// Formate l'instant dans le fuseau horaire local. Notez que cela contrôle uniquement // le formatage - il ne mute pas l'objet comme le fait moment.utc. console.log(myInstant.toString({ timeZone : 'America/New_York' })); // 2026-02-18T21:10:00-05:00
Vous pouvez également créer d'autres types d'objets temporels, notamment :
Temporal.PlainDate : une date sans information temporelle. Temporal.PlainTime : une heure sans information de date. Temporal.ZonedDateTime : date et heure dans un fuseau horaire spécifique.
Chacun d'entre eux possède une méthode from qui peut être appelée avec un objet spécifiant la date et/ou l'heure, ou une chaîne de date à analyser. // Juste un rendez-vous const aujourd'hui = Temporal.PlainDate.from({ année: 2026, mois : 2, // notez que nous utilisons 2 pour février jour: 18 }); console.log(aujourd'hui.toString()); // 2026-02-18
// Juste un moment const lunchTime = Temporal.PlainTime.from({ heure : 12 }); console.log(lunchTime.toString()); // 12:00:00
// Une date et une heure dans le fuseau horaire de l'Est des États-Unis const dueAt = Temporal.ZonedDateTime.from({ fuseau horaire : « Amérique/New_York », année: 2026, mois : 3, jour : 1, heure : 12, minutes: 0, seconde : 0 }); console.log(dueAt.toString()); // 2026-03-01T12:00:00-05:00[Amérique/New_York]
Analyse Nous avons couvert la création programmatique d’informations de date et d’heure. Voyons maintenant l'analyse. L'analyse est un domaine dans lequel Moment est plus flexible que l'API temporelle intégrée. Vous pouvez analyser une chaîne de date en la passant à la fonction moment. Avec un seul argument, Moment attend une chaîne de date ISO, mais vous pouvez utiliser des formats alternatifs si vous fournissez un deuxième argument spécifiant le format de date utilisé.
const isoDate = moment('2026-02-21T09:00:00'); const formattedDate = moment('21/02/26 9:00:00', 'M/D/YY h:mm:ss');
console.log(isoDate); // Instant<2026-02-21T09:00:00-05:00>
console.log(formattedDate); // Instant<2026-02-21T09:00:00-05:00>
Dans les anciennes versions, Moment ferait la meilleure estimation pour analyser toute chaîne de date arbitrairement formatée. Cela pourrait conduire à des résultats imprévisibles. Par exemple, le 02-03-2026 est-il le 2 février ou le 3 mars ? Pour cette raison, les versions plus récentes de Moment affichent un avertissement de dépréciation bien visible si elle est appelée sans chaîne de date au format ISO (sauf si le deuxième argument avec le format souhaité est également fourni). Temporal analysera uniquement une chaîne de date spécifiquement formatée. La chaîne doit être conforme au format ISO 8601 ou à son extension, RFC 9557. Si une chaîne de date non conforme est transmise à une méthode from, Temporal lèvera une RangeError.
// Utilisation d'une chaîne de date RFC 9557 const myDate = Temporal.Instant.from('2026-02-21T09:00:00-05:00[America/New_York]'); console.log(myDate.toString({ timeZone : 'America/New_York' })); // 2026-02-21T09:00:00-05:00
// Utilisation d'une chaîne de date inconnue const otherDate = Temporal.Instant.from('21/2/26 9:00:00'); // RangeError : erreur temporelle : caractère non valide lors de l'analyse de la valeur de l'année.
Les exigences exactes de la chaîne de date dépendent du type d'objet temporel que vous créez. Dans l'exemple ci-dessus, Temporal.Instant nécessite une image ISO complèteChaîne de date 8601 ou RFC 9557 spécifiant la date et l'heure avec un décalage de fuseau horaire, mais vous pouvez également créer des objets PlainDate ou PlainTime en utilisant uniquement un sous-ensemble du format de date. const maDate = Temporal.PlainDate.from('2026-02-21'); console.log(myDate.toString()); // 2026-02-21
const myTime = Temporal.PlainTime.from('09:00:00'); console.log(myTime.toString()); // 09:00:00
Notez que ces chaînes doivent toujours être conformes au format attendu, sinon une erreur sera générée.
// Utilisation d'une chaîne temporelle non conforme. Tout cela lancera une RangeError. Temporal.PlainTime.from('9:00'); Temporal.PlainTime.from('9:00:00 AM');
Conseil de pro : gestion des chaînes non ISO. Étant donné que Temporal donne la priorité à la fiabilité, il n'essaiera pas de deviner le format d'une chaîne comme 02-01-2026. Si votre source de données utilise de telles chaînes, vous devrez effectuer quelques manipulations de chaînes pour réorganiser les valeurs dans une chaîne ISO telle que 2026-02-01 avant d'essayer de l'utiliser avec Temporal.
Formatage Une fois que vous avez un objet Moment ou Temporal, vous souhaiterez probablement le convertir en chaîne formatée à un moment donné. C'est un cas où Moment est un peu plus concis. Vous appelez la méthode de formatage de l'objet avec une chaîne de jetons décrivant le format de date souhaité. const date = moment();
console.log(date.format('MM/JJ/AAAA')); // 22/02/2026
console.log(date.format('MMMM Do AAAA, h:mm:ss a')); // 22 février 2026, 20h18:30
D'un autre côté, Temporal vous oblige à être un peu plus verbeux. Les objets temporels, tels qu'Instant, possèdent une méthode toLocaleString qui accepte diverses options de formatage spécifiées comme propriétés d'un objet.
const date = Temporal.Now.instant();
// sans argument, nous obtiendrons le format par défaut pour la locale actuelle console.log(date.toLocaleString()); // 22/02/2026, 20:23:36 (en supposant que les paramètres régionaux sont en-US)
// passe les options de formatage pour générer une chaîne de format personnalisée console.log(date.toLocaleString('en-US', { mois : 'long', jour : 'numérique', année : 'numérique', heure : '2 chiffres', minute : « 2 chiffres » })); // 22 février 2026 à 20h23
// ne transmet que les champs souhaités dans la chaîne de format console.log(date.toLocaleString('en-US', { mois : 'court', jour : 'numérique' })); // 22 février
Le formatage de la date temporelle utilise en fait l'API Intl.DateTimeFormat (qui est déjà facilement disponible dans les navigateurs modernes) sous le capot. Cela signifie que vous pouvez créer un objet DateTimeFormat réutilisable avec vos options de formatage personnalisées, puis transmettre des objets temporels à sa méthode de formatage. Pour cette raison, il ne prend pas en charge les formats de date personnalisés comme le fait Moment. Si vous avez besoin de quelque chose comme « T1 2026 » ou d'un autre formatage spécialisé, vous aurez peut-être besoin d'un code de formatage de date personnalisé ou d'une bibliothèque tierce. const formateur = new Intl.DateTimeFormat('en-US', { mois : '2 chiffres', jour : '2 chiffres', année : 'numérique' });
const date = Temporal.Now.instant(); console.log(formatter.format(date)); // 22/02/2026
Les jetons de formatage de Moment sont plus simples à écrire, mais ils ne sont pas adaptés aux paramètres régionaux. Les chaînes de format « codent en dur » des éléments comme l'ordre mois/jour. L'avantage d'utiliser un objet de configuration, comme le fait Temporal, est qu'il s'adaptera automatiquement à n'importe quel paramètre régional donné et utilisera le format correct. const date = Temporal.Now.instant();
const formatOptions = { mois : 'numérique', jour : 'numérique', année : 'numérique' } ;
console.log(date.toLocaleString('en-US', formatOptions)); // 22/02/2026
console.log(date.toLocaleString('en-GB', formatOptions)); // 22/02/2026
Calculs de dates Dans de nombreuses applications, vous devrez effectuer certains calculs sur une date. Vous souhaiterez peut-être ajouter ou soustraire des unités de temps (jours, heures, secondes, etc.). Par exemple, si vous avez la date actuelle, vous souhaiterez peut-être montrer à l'utilisateur la date dans 1 semaine. Les objets moment ont des méthodes telles que l'ajout et la soustraction qui effectuent ces opérations. Ces fonctions prennent une valeur et une unité, par exemple : add(7, 'days'). Cependant, une différence très importante entre Moment et Temporal est que lors de ces calculs de date, l'objet sous-jacent est modifié et sa valeur d'origine est perdue. const maintenant = moment();
console.log (maintenant); // Instant<2026-02-24T20:08:36-05:00>
const nextWeek = now.add(7, 'jours'); console.log(semainenext); // Instant<2026-03-03T20:08:36-05:00>
// Gotcha - l'objet d'origine a été muté console.log (maintenant); // Instant<2026-03-03T20:08:36-05:00>
Pour éviter de perdre la date d'origine, vous pouvez appeler clone sur l'objet Moment pour créer une copie. const maintenant= moment(); const nextWeek = now.clone().add(7, 'days');
console.log (maintenant); // Instant<2026-02-24T20:12:55-05:00>
console.log(semainenext); // Instant<2026-03-03T20:12:55-05:00>
En revanche, les objets temporels sont immuables. Une fois que vous avez créé un objet comme un Instant, un PlainDate, etc., la valeur de cet objet ne changera jamais. Les objets temporels disposent également de méthodes d'ajout et de soustraction. Temporal est un peu pointilleux quant aux unités de temps qui peuvent être ajoutées à quels types d'objets. Par exemple, vous ne pouvez pas ajouter de jours à un instantané :
const maintenant = Temporal.Now.instant(); const nextWeek = now.add({ jours : 7 }); // RangeError : erreur temporelle : la plus grande unité ne peut pas être une unité de date
En effet, les objets Instant représentent un moment spécifique en UTC et sont indépendants du calendrier. Étant donné que la durée d'une journée peut changer en fonction de règles de fuseau horaire telles que l'heure d'été, ce calcul n'est pas disponible sur un Instant. Vous pouvez cependant effectuer cette opération sur d'autres types d'objets, comme un PlainDateTime : const maintenant = Temporal.Now.plainDateTimeISO(); console.log(maintenant.toLocaleString()); // 24/02/2026, 20:23:59
const nextWeek = now.add({ jours : 7 });
// Notez que le PlainDateTime d'origine reste inchangé console.log(maintenant.toLocaleString()); // 24/02/2026, 20:23:59
console.log(nextWeek.toLocaleString()); // 3/3/2026, 20:23:59
Vous pouvez également calculer le temps qui s'écoule entre deux objets Moment ou Temporel. Avec la fonction diff de Moment, vous devez fournir une unité de granularité, sinon elle renverra la différence en millisecondes. const date1 = moment('2026-02-21T09:00:00'); const date2 = moment('2026-02-22T10:30:00');
console.log(date2.diff(date1)); //91800000
console.log(date2.diff(date1, 'jours')); // 1
Pour ce faire avec un objet Temporal, vous pouvez passer un autre objet Temporal à ses méthodes jusqu'à ou depuis. Cela renvoie un objet Temporal.Duration contenant des informations sur le décalage horaire. L'objet Durée possède des propriétés pour chaque composante de la différence et peut également générer une chaîne de durée ISO 8601 représentant la différence horaire.
const date1 = Temporal.PlainDateTime.from('2026-02-21T09:00:00'); const date2 = Temporal.PlainDateTime.from('2026-02-22T10:30:00');
// hugeUnit spécifie la plus grande unité de temps à représenter // dans le calcul de la durée const diff = date2.since(date1, {largeUnit: 'jour' });
console.log(diff.days); // 1
console.log(diff.heures); // 1
console.log(diff.minutes); // 30
console.log(diff.toString()); //P1DT1H30M // (chaîne de durée ISO 8601 : 1 jour, 1 heure, 30 minutes)
Comparer les dates et les heures Moment et Temporal vous permettent tous deux de comparer les dates et les heures pour déterminer laquelle précède l'autre, mais adoptent des approches différentes avec l'API. Moment fournit des méthodes telles que isBefore, isAfter et isSame pour comparer deux objets Moment. const date1 = moment('2026-02-21T09:00:00'); const date2 = moment('2026-02-22T10:30:00');
console.log(date1.isBefore(date2)); // vrai
Temporal utilise une méthode de comparaison statique pour effectuer une comparaison entre deux objets du même type. Il renvoie -1 si la première date précède la seconde, 0 si elles sont égales ou 1 si la première date vient après la seconde. L'exemple suivant montre comment comparer deux objets PlainDate. Les deux arguments de Temporal.PlainDate.compare doivent être des objets PlainDate.
const date1 = Temporal.PlainDate.from({ année : 2026, mois : 2, jour : 24 }); const date2 = Temporal.PlainDate.from({ année : 2026, mois : 3, jour : 24 });
// date1 vient avant date2, donc -1 console.log(Temporal.PlainDate.compare(date1, date2));
// Erreur si on essaie de comparer deux objets de types différents console.log(Temporal.PlainDate.compare(date1, Temporal.Now.instant())); // TypeError : erreur temporelle : champs PlainDate non valides fournis.
En particulier, cela facilite le tri chronologique d'un tableau d'objets temporels. // Un tableau d'objets Temporal.PlainDate dates const = [ ... ];
// utilise Temporal.PlainDate.compare comme fonction de comparaison dates.sort(Temporal.PlainDate.compare);
Conversions de fuseau horaire La bibliothèque principale Moment ne prend pas en charge les conversions de fuseau horaire. Si vous avez besoin de cette fonctionnalité, vous devez également installer le package moment-timezone. Ce package n'est pas modifiable en arborescence et peut donc augmenter considérablement la taille de votre bundle. Une fois que vous avez installé moment-timezone, vous pouvez convertir les objets Moment en différents fuseaux horaires avec la méthode tz. Comme pour les autres opérations Moment, cela modifie le sous-jacentobjet. // En supposant l'heure de l'Est des États-Unis const maintenant = moment(); console.log (maintenant); // Instant<2026-02-28T20:08:20-05:00>
// Convertit en heure du Pacifique. // L'heure de l'Est d'origine est perdue. now.tz('Amérique/Los_Angeles'); console.log (maintenant); // Instant<2026-02-28T17:08:20-08:00>
La fonctionnalité de fuseau horaire est intégrée à l'API Temporal lors de l'utilisation d'un objet Temporal.ZonedDateTime. Ces objets incluent une méthode withTimeZone qui renvoie un nouveau ZonedDateTime représentant le même moment dans le temps, mais dans le fuseau horaire spécifié. // Encore une fois, en supposant l'heure de l'Est des États-Unis const maintenant = Temporal.Now.zonedDateTimeISO(); console.log(maintenant.toLocaleString()); // 28/02/2026, 20 h 12 min 02 s HNE
// Convertir en heure du Pacifique const nowPacific = now.withTimeZone('America/Los_Angeles'); console.log(nowPacific.toLocaleString()); // 28/02/2026, 17:12:02 PST
// L'objet d'origine reste inchangé console.log(maintenant.toLocaleString()); // 28/02/2026, 20 h 12 min 02 s HNE
Remarque : Les valeurs formatées renvoyées par toLocaleString dépendent, comme leur nom l'indique, des paramètres régionaux. L'exemple de code a été développé dans la langue en-US, le format est donc le suivant : 28/02/2026, 17:12:02 PST. Dans une autre région, cela peut être différent. Par exemple, dans les paramètres régionaux en-GB, vous obtiendrez quelque chose comme 28/2/2026, 17:12:02 GMT-8. Une refactorisation du monde réel Supposons que nous construisions une application permettant de planifier des événements sur plusieurs fuseaux horaires. Une partie de cette application est une fonction, getEventTimes, qui prend une chaîne ISO 8601 représentant l'heure et la date de l'événement, un fuseau horaire local et un fuseau horaire cible. La fonction crée des chaînes d'heure et de date formatées pour l'événement dans les deux fuseaux horaires. Si la fonction reçoit une chaîne d’entrée qui n’est pas une chaîne d’heure/date valide, elle générera une erreur. Voici l'implémentation originale, utilisant Moment (nécessitant également l'utilisation du package moment-timezone).
importer le moment depuis « moment-timezone » ;
fonction getEventTimes (inputString, userTimeZone, targetTimeZone) { const timeFormat = 'MMM J, AAAA, h:mm:ss a z';
// 1. Créer le moment initial dans le fuseau horaire de l'utilisateur const eventTime = moment.tz( chaîne d'entrée, moment.ISO_8601, // Attendez-vous à une chaîne ISO 8601 true, // Analyse stricte utilisateurTimeZone );
// Génère une erreur si inputString ne représente pas une date valide si (!eventTime.isValid()) { throw new Error('Entrée date/heure invalide'); }
// 2. Calculer le temps cible // CRITIQUE : Nous devons cloner, sinon 'eventTime' change pour toujours ! const targetTime = eventTime.clone().tz(targetTimeZone);
retourner { local : eventTime.format(timeFormat), cible : targetTime.format(timeFormat), } ; }
horaire const = getEventTimes ( '2026-03-05T15:00-05:00', 'Amérique/New_York', "Europe/Londres", );
console.log(schedule.local); // 5 mars 2026, 15 h 00 min 00 s HNE
console.log(schedule.target); // 5 mars 2026, 20h00:00 GMT
Dans cet exemple, nous utilisons un format de date attendu ISO 8601, qui est utilement intégré à Moment. Nous utilisons également une analyse stricte, ce qui signifie que Moment n'essaiera pas de deviner avec une chaîne de date qui ne correspond pas au format. Si une chaîne de date non ISO est transmise, cela entraînera un objet date non valide et nous générerons une erreur. L'implémentation temporelle semble similaire, mais présente quelques différences clés.
fonction getEventTimes (inputString, userTimeZone, targetTimeZone) { // 1. Analysez l'entrée directement dans un Instant, puis créez // un ZonedDateTime dans la zone de l'utilisateur. const instant = Temporal.Instant.from(inputString); const eventTime = instant.toZonedDateTimeISO(userTimeZone);
// 2. Convertir en zone cible // Ceci renvoie automatiquement un NOUVEL objet ; 'eventTime' est sûr. const targetTime = eventTime.withTimeZone(targetTimeZone);
// 3. Formatage à l'aide de Intl (intégré) options const = { année : 'numérique', mois : 'court', jour : 'numérique', heure : 'numérique', minute : '2 chiffres', deuxième : « 2 chiffres », timeZoneName : 'court' } ;
retourner { local : eventTime.toLocaleString(navigator.langue, options), cible : targetTime.toLocaleString (navigator.langue, options) } ; }
horaire const = getEventTimes ( '2026-03-05T15:00-05:00', 'Amérique/New_York', "Europe/Londres", );
console.log(schedule.local); // 5 mars 2026, 15 h 00 min 00 s HNE
console.log(schedule.target); // 5 mars 2026, 20h00:00 GMT
Avec Moment, nous devons spécifier explicitement une chaîne de format pour les chaînes de date résultantes. Quel que soit l'emplacement ou les paramètres régionaux de l'utilisateur, les heures des événements seront toujours au format 5 mars 2026, 3:00:00.17h00 HNE. De plus, nous n’avons pas besoin de lever explicitement une exception. Si une chaîne non valide est transmise à Temporal.Instant.from, Temporal lèvera l'exception pour nous. Une chose à noter est que même avec une analyse stricte, la version Moment est encore plus indulgente. Temporel nécessite le décalage du fuseau horaire à la fin de la chaîne. Vous devez également noter que puisque nous utilisons navigator.langage, ce code ne s'exécutera que dans un environnement de navigateur, car le navigateur n'est pas défini dans un environnement Node.js. L'implémentation temporelle utilise les paramètres régionaux actuels du navigateur (navigator.langue), de sorte que l'utilisateur obtiendra automatiquement les heures des événements formatées dans leur format d'heure locale. Dans la langue en-US, nous sommes le 5 mars 2026 à 15 h 00 HNE. Cependant, si l'utilisateur se trouve à Londres, par exemple, les heures de l'événement seront au format 5 mars 2026, 15:00:00 GMT-5. Résumé
Action Moment.js Temporel Heure actuelle moment() Temporal.Now.zonedDateTimeISO() Analyse ISO moment(str) Temporel.Instant.from(str) Ajouter du temps .add(7, 'days') (mute) .add({ jours : 7 }) (nouvel objet) Différence .diff(autre, 'heures') .depuis (autres).heures Fuseau horaire .tz('Zone/Nom') .withTimeZone('Zone/Nom')
À première vue, la différence peut être légèrement différente (et dans le cas de Temporal, parfois plus détaillée et plus stricte), mais il y a plusieurs avantages clés à utiliser Temporal plutôt que Moment.js :
Être plus explicite signifie moins de surprises et de bugs involontaires. Le moment peut sembler plus indulgent, mais il implique des « conjectures », qui peuvent parfois aboutir à des dates incorrectes. Si vous donnez à Temporal quelque chose de invalide, cela génère une erreur. Si le code s’exécute, vous savez que vous avez une date valide. Moment peut ajouter une taille significative à l'ensemble de l'application, en particulier si vous utilisez le package moment-timezone. Temporal n’ajoute rien (une fois livré dans vos navigateurs cibles). L'immuabilité vous donne l'assurance que vous ne perdrez ni n'écraserez de données lors de conversions et d'opérations de dates. Différentes représentations du temps (Instant, PlainDateTime, ZonedDateTime) en fonction de vos besoins, où Moment est toujours un wrapper autour d'un horodatage UTC. Temporal utilise les API Intl pour le formatage de la date, ce qui signifie que vous pouvez avoir un formatage adapté aux paramètres régionaux sans avoir à spécifier explicitement des jetons.
Notes sur le polyfill Comme mentionné précédemment, un polyfill temporel est disponible, distribué sous forme de package npm nommé @js-temporal/polyfill. Si vous souhaitez utiliser Temporal aujourd'hui, vous aurez besoin de ce polyfill pour prendre en charge les navigateurs comme Safari qui n'ont pas encore livré l'API. La mauvaise nouvelle, c’est que cela augmentera la taille de votre forfait. La bonne nouvelle est que cela ajoute encore beaucoup moins que le moment ou le moment-fuseau horaire. Voici une comparaison des tailles de packages telles que rapportées par Bundlephobia.com, un site Web qui présente des informations sur les tailles de packages npm (cliquez sur chaque nom de package pour voir l'analyse Bundlephobia) :
Forfait Minifié Minifié et compressé @js-temporel/polyfill 154,1 Ko 44,1 Ko moment 294,4 Ko 75,4 Ko moment-fuseau horaire 1 Mo 114,2 Ko
Le polyfill a également historiquement rencontré des problèmes de performances liés à l’utilisation de la mémoire et, au moment de la rédaction, il est considéré comme étant dans un état alpha. Pour cette raison, vous ne souhaiterez peut-être pas l’utiliser en production jusqu’à ce qu’il atteigne un état plus mature. L’autre bonne nouvelle est que, espérons-le, le polyfill ne sera plus nécessaire très longtemps (à moins que vous n’ayez besoin de prendre en charge des navigateurs plus anciens, bien sûr). Au moment de la rédaction de cet article, Temporal était disponible dans Chrome, Edge et Firefox. Il n’est pas encore tout à fait prêt dans Safari, bien qu’il semble être disponible avec un indicateur d’exécution dans le dernier aperçu technologique.
