Jeff Bruchado
Retour au blog

ES2026 et Temporal API: JavaScript Aura Enfin une Manipulation des Dates Native et Correcte

Salut HaWkers, apres des annees de dependance aux bibliotheques externes comme moment.js et date-fns, JavaScript aura enfin une API de dates native qui a du sens. La Temporal API a atteint le Stage 4 et fera officiellement partie de ES2026, marquant une des plus grandes evolutions du langage ces dernieres annees.

Pourquoi la communaute JavaScript a-t-elle attendu si longtemps pour cela? Et qu'est-ce qui change en pratique pour les developpeurs?

Le Probleme Historique de Date

L'objet Date de JavaScript est celebre pour ses incoherences.

Problemes Classiques

Pourquoi Date est problematique:

// Probleme 1: Les mois commencent a 0
const date = new Date(2026, 0, 15); // Janvier = 0, pas 1
console.log(date); // 15 Janvier 2026

// Probleme 2: Mutabilite dangereuse
const original = new Date(2026, 5, 15);
const modified = original;
modified.setMonth(7); // Modifie LES DEUX variables!
console.log(original); // Aout, pas Juin!

// Probleme 3: Parsing inconsistant
new Date('2026-01-15'); // Interprete comme UTC
new Date('01/15/2026'); // Interprete comme local
// Resultats differents selon le timezone!

// Probleme 4: Pas de support timezone
const date2 = new Date();
// Comment convertir vers le timezone de Tokyo?
// Necessite une bibliotheque externe ou des calculs manuels

Temporal API: La Solution

Immutable, precis et intuitif.

Types Principaux

Objets disponibles dans Temporal:

// Temporal.PlainDate - Date seulement, sans heure ou timezone
const date = Temporal.PlainDate.from('2026-01-15');
console.log(date.year);  // 2026
console.log(date.month); // 1 (Janvier = 1, enfin!)
console.log(date.day);   // 15

// Temporal.PlainTime - Heure seulement, sans date
const time = Temporal.PlainTime.from('14:30:00');
console.log(time.hour);   // 14
console.log(time.minute); // 30

// Temporal.PlainDateTime - Date et heure, sans timezone
const dateTime = Temporal.PlainDateTime.from('2026-01-15T14:30:00');

// Temporal.ZonedDateTime - Date, heure ET timezone
const zonedDT = Temporal.ZonedDateTime.from({
  timeZone: 'Europe/Paris',
  year: 2026,
  month: 1,
  day: 15,
  hour: 14,
  minute: 30
});

// Temporal.Instant - Point exact dans le temps (timestamp)
const instant = Temporal.Instant.from('2026-01-15T17:30:00Z');

// Temporal.Duration - Duree de temps
const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });

Operations Immutables

Ne plus jamais modifier accidentellement:

const date = Temporal.PlainDate.from('2026-01-15');

// Ajouter des jours retourne une NOUVELLE instance
const nextWeek = date.add({ days: 7 });
console.log(date.toString());     // 2026-01-15 (original intact)
console.log(nextWeek.toString()); // 2026-01-22 (nouvelle instance)

// Soustraire du temps
const lastMonth = date.subtract({ months: 1 });
console.log(lastMonth.toString()); // 2025-12-15

// Modifier des champs specifiques
const newYear = date.with({ year: 2027 });
console.log(newYear.toString()); // 2027-01-15

// Comparaisons directes
const date1 = Temporal.PlainDate.from('2026-01-15');
const date2 = Temporal.PlainDate.from('2026-02-20');

console.log(Temporal.PlainDate.compare(date1, date2)); // -1 (date1 < date2)
console.log(date1.equals(date2)); // false

Timezones Enfin Resolus

Conversions sans maux de tete.

Travailler avec les Fuseaux Horaires

// Creer une date avec un timezone specifique
const parisDateTime = Temporal.ZonedDateTime.from({
  timeZone: 'Europe/Paris',
  year: 2026,
  month: 1,
  day: 15,
  hour: 10,
  minute: 0
});

console.log(parisDateTime.toString());
// 2026-01-15T10:00:00+01:00[Europe/Paris]

// Convertir vers un autre timezone
const tokyoDateTime = parisDateTime.withTimeZone('Asia/Tokyo');
console.log(tokyoDateTime.toString());
// 2026-01-15T18:00:00+09:00[Asia/Tokyo]

// Meme instant, representations locales differentes
console.log(parisDateTime.toInstant().equals(tokyoDateTime.toInstant())); // true

// Obtenir le decalage actuel
console.log(parisDateTime.offset); // +01:00

// Lister tous les timezones disponibles
const timezones = Temporal.TimeZone.getAvailableTimeZones();
console.log(timezones.includes('Europe/Paris')); // true

Heure d'Ete

Gestion automatique du DST:

// Temporal gere automatiquement l'heure d'ete
const beforeDST = Temporal.ZonedDateTime.from({
  timeZone: 'Europe/Paris',
  year: 2026,
  month: 3,
  day: 29,
  hour: 1,
  minute: 30
});

// Ajouter 2 heures en traversant le changement d'heure
const afterDST = beforeDST.add({ hours: 2 });
console.log(afterDST.hour); // 4 (pas 3, car une heure a ete sautee)

// Verifier si en heure d'ete
console.log(beforeDST.inDST); // false
console.log(afterDST.inDST);  // true

Duration: Calculs de Periode

Intervalles et durees precises.

Operations avec Duration

// Creer une duree
const duration = Temporal.Duration.from({
  years: 1,
  months: 2,
  days: 15,
  hours: 8,
  minutes: 30
});

console.log(duration.total('days')); // Total approximatif en jours

// Difference entre dates
const start = Temporal.PlainDate.from('2026-01-15');
const end = Temporal.PlainDate.from('2026-06-20');

const diff = start.until(end);
console.log(diff.months); // 5
console.log(diff.days);   // 5

// Specifier les unites desirees
const diffInDays = start.until(end, { largestUnit: 'day' });
console.log(diffInDays.days); // 156

// Arrondir la duree
const preciseDuration = Temporal.Duration.from({
  hours: 2,
  minutes: 45,
  seconds: 30
});

const rounded = preciseDuration.round({
  smallestUnit: 'minute',
  roundingMode: 'halfExpand'
});
console.log(rounded.minutes); // 46

Application Pratique: Compte a Rebours

function getCountdown(targetDate) {
  const now = Temporal.Now.plainDateTimeISO();
  const target = Temporal.PlainDateTime.from(targetDate);

  if (Temporal.PlainDateTime.compare(now, target) >= 0) {
    return { expired: true };
  }

  const duration = now.until(target, {
    largestUnit: 'day'
  });

  return {
    expired: false,
    days: duration.days,
    hours: duration.hours,
    minutes: duration.minutes,
    seconds: duration.seconds
  };
}

const countdown = getCountdown('2026-12-31T23:59:59');
console.log(`${countdown.days}j ${countdown.hours}h ${countdown.minutes}m`);

Comparaison: Temporal vs Bibliotheques

Adieu les dependances inutiles.

Avant (avec date-fns)

import {
  format,
  addDays,
  differenceInDays,
  parseISO,
  isAfter
} from 'date-fns';
import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';

const date = parseISO('2026-01-15');
const nextWeek = addDays(date, 7);
const formatted = format(nextWeek, 'dd/MM/yyyy');

// Timezone necessite un package supplementaire
const parisTime = utcToZonedTime(new Date(), 'Europe/Paris');

Apres (avec Temporal)

// Natif, sans imports
const date = Temporal.PlainDate.from('2026-01-15');
const nextWeek = date.add({ days: 7 });
const formatted = nextWeek.toLocaleString('fr-FR');

// Timezone natif
const parisTime = Temporal.Now.zonedDateTimeISO('Europe/Paris');

Comparatif de Taille de Bundle

Impact sur la taille du projet:

Bibliotheque Taille (minified) Avec Temporal
moment.js 72 KB 0 KB
date-fns (full) 85 KB 0 KB
dayjs 7 KB 0 KB
luxon 68 KB 0 KB
Temporal Natif 0 KB

💡 Note: Temporal est natif au navigateur/runtime, donc il n'ajoute rien a la taille de bundle de votre application.

Cas d'Utilisation Pratiques

Exemples du monde reel.

Planification de Reunions Globales

function scheduleGlobalMeeting(participants) {
  // Chaque participant avec son timezone
  const schedules = participants.map(p => ({
    name: p.name,
    timezone: p.timezone,
    workStart: Temporal.PlainTime.from('09:00'),
    workEnd: Temporal.PlainTime.from('18:00')
  }));

  // Trouver un horaire qui fonctionne pour tous
  const referenceDate = Temporal.Now.plainDateISO();

  for (let hour = 0; hour < 24; hour++) {
    const testTime = Temporal.PlainDateTime.from({
      year: referenceDate.year,
      month: referenceDate.month,
      day: referenceDate.day,
      hour: hour,
      minute: 0
    });

    const worksForAll = schedules.every(s => {
      const localTime = testTime
        .toZonedDateTime('UTC')
        .withTimeZone(s.timezone)
        .toPlainTime();

      return Temporal.PlainTime.compare(localTime, s.workStart) >= 0 &&
             Temporal.PlainTime.compare(localTime, s.workEnd) <= 0;
    });

    if (worksForAll) {
      return { hour, suitable: true };
    }
  }

  return { suitable: false };
}

Adoption et Compatibilite

Quand et comment utiliser.

Statut Actuel

Disponibilite en 2026:

Navigateurs:

  • Chrome 144+: Support complet
  • Firefox: En developpement
  • Safari: En developpement

Runtimes:

  • Node.js 24+: Support complet
  • Deno: Support complet
  • Bun: Support complet

Polyfill disponible:

npm install @js-temporal/polyfill
// Utiliser le polyfill pendant la mise a jour des navigateurs
import { Temporal } from '@js-temporal/polyfill';

const now = Temporal.Now.plainDateTimeISO();

Migration Graduelle

Strategie de transition:

// Wrapper pour migration graduelle
function toTemporal(date) {
  if (date instanceof Date) {
    return Temporal.Instant
      .fromEpochMilliseconds(date.getTime())
      .toZonedDateTimeISO('UTC');
  }
  return date;
}

function toDate(temporal) {
  if (temporal instanceof Temporal.ZonedDateTime) {
    return new Date(temporal.epochMilliseconds);
  }
  return temporal;
}

// Utilisation pendant la migration
const legacyDate = new Date();
const temporal = toTemporal(legacyDate);
// ... operations avec Temporal
const backToDate = toDate(temporal);

ES2026 avec Temporal API represente une des plus grandes evolutions de JavaScript. Nous aurons enfin une manipulation des dates qui a du sens, qui est immutable par defaut et supporte les timezones nativement. Si vous utilisez encore moment.js ou date-fns pour les operations basiques, preparez-vous a simplifier considerablement votre code tres bientot.

Si vous voulez approfondir les nouveautes du JavaScript moderne, je recommande de voir un autre article: Signals: Le Nouveau Standard de Reactivite JavaScript ou vous decouvrirez comment la reactivite evolue dans le langage.

Allez, on y va! 🦅

📚 Voulez-vous Approfondir vos Connaissances en JavaScript?

Cet article a couvert la Temporal API, mais il y a encore beaucoup a explorer dans le monde du developpement moderne.

Les developpeurs qui investissent dans des connaissances solides et structurees ont tendance a avoir plus d'opportunites sur le marche.

Materiel d'Etude Complet

Si vous voulez maitriser JavaScript des bases aux concepts avances, j'ai prepare un guide complet:

Options d'investissement:

  • 1x de $4.90 par carte
  • ou $4.90 comptant

👉 Decouvrir le Guide JavaScript

💡 Materiel mis a jour avec les meilleures pratiques du marche

Commentaires (0)

Cet article n'a pas encore de commentaires. Soyez le premier!

Ajouter des commentaires