Formatage et conversion du temps en JavaScript : pièges courants

const instant = new Date("2025-01-01T00:00:00Z");

instant.toLocaleString("en-US", { timeZone: "UTC" });
// "1/1/2025, 12:00:00 AM"

instant.toLocaleString("en-US", { timeZone: "America/Los_Angeles" });
// "12/31/2024, 4:00:00 PM" (jour précédent)

// seconds -> Date
const seconds = 1704067200;
const d1 = new Date(seconds * 1000);

// milliseconds -> Date
const ms = 1704067200000;
const d2 = new Date(ms);

// Date -> seconds
const secondsOut = Math.floor(d2.getTime() / 1000);

// Date -> milliseconds
const msOut = d2.getTime();

const ts = 1704067200;      // seconds
const d = new Date(ts);     // WRONG: treated as milliseconds

function asDateFromUnknownEpoch(x) {
  // heuristic grossier : les secondes ~1e9-1e10, les millisecondes ~1e12-1e13
  if (x < 1e11) return new Date(x * 1000); // assume seconds
  return new Date(x);                      // assume milliseconds
}

const input = Number(valueFromApi);
console.log({ input, digits: String(Math.trunc(input)).length });
console.log('as ISO:', asDateFromUnknownEpoch(input).toISOString());

const d = new Date('2025-01-01T00:30:00Z');

d.getHours();      // heure en *heure locale*
d.getUTCHours();   // heure en UTC

d.toString();      // chaîne en heure locale
d.toISOString();   // UTC (termine toujours par Z)

const iso = "2025-03-04T12:30:00Z";
const d = new Date(iso);
const back = d.toISOString();

console.log(iso);  // 2025-03-04T12:30:00Z
console.log(back); // 2025-03-04T12:30:00.000Z

const d = new Date('2025-01-05T16:30:00Z');

// Locale de l'utilisateur + fuseau horaire local de l'utilisateur
console.log(new Intl.DateTimeFormat(undefined, {
  dateStyle: 'medium',
  timeStyle: 'short'
}).format(d));

// Forcer un fuseau horaire spécifique (utile pour les heures d'événements)
console.log(new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone: 'UTC'
}).format(d));

console.log(new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  hour12: true
}).format(d));

// Scénario : programmer « même heure locale demain »
const d = new Date(2025, 2, 8, 9, 0); // 8 mars, 9:00 heure locale

const plus24h = new Date(d.getTime() + 24 * 60 * 60 * 1000);
const nextDaySameLocal = new Date(d);
nextDaySameLocal.setDate(d.getDate() + 1);

// Autour de DST, plus24h et nextDaySameLocal peuvent différer d'une heure.

function formatHMS(totalSeconds) {
  const s = Math.max(0, Math.floor(totalSeconds));
  const hh = String(Math.floor(s / 3600)).padStart(2, "0");
  const mm = String(Math.floor((s % 3600) / 60)).padStart(2, "0");
  const ss = String(s % 60).padStart(2, "0");
  return `${hh}:${mm}:${ss}`;
}

formatHMS(75);    // "00:01:15" (compte à rebours)
formatHMS(5423);  // "01:30:23" (durée média)

const a = new Date('2025-01-10T12:00:00Z');
const b = new Date('2025-01-10T12:00:01Z');

if (a.getTime() < b.getTime()) {
  // a est avant
}

// Marche aussi :
if (+a < +b) {
  // l'unaire + appelle valueOf()
}

items.sort((x, y) => new Date(x.createdAt).getTime() - new Date(y.createdAt).getTime());

const start = new Date('2025-01-01T00:00:00Z').getTime();
const end   = new Date('2025-02-01T00:00:00Z').getTime();

const inRange = items.filter(i => {
  const t = new Date(i.createdAt).getTime();
  return t >= start && t < end;
});

// Début/fin de journée locale
const d = new Date(2025, 0, 10); // 10 janv en heure locale
const localStart = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
const localEnd   = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);

// Début/fin de journée UTC
const utcStart = new Date(Date.UTC(2025, 0, 10, 0, 0, 0, 0));
const utcEnd   = new Date(Date.UTC(2025, 0, 10, 23, 59, 59, 999));

console.log('raw input:', input);

const d = new Date(input);
console.log('toISOString (UTC):', d.toISOString());
console.log('toString (local):', d.toString());
console.log('timezone offset (min):', d.getTimezoneOffset());

console.log(Intl.DateTimeFormat().resolvedOptions());

console.log('TZ:', process.env.TZ);
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);

Formatage et conversion du temps en JavaScript : pièges courants | Koder.ai

Ce qui tourne généralement mal avec l'heure en JavaScript

Les symptômes les plus courants

Pourquoi cela arrive : « heure » peut signifier plusieurs choses

Ce sur quoi cet article se concentre

Types de données temporelles : timestamp, Date et chaîne

Les trois représentations que vous verrez le plus

« Instant » vs « affichage humain »

Choisissez une « source de vérité »

Timestamps : secondes vs millisecondes (facile à confondre)

Règle simple

Conversions sûres (secondes ↔ millisecondes)

Le bug classique : passer des secondes à Date()

Vérifications rapides pour valider

Heure locale vs UTC : pourquoi votre sortie bouge

Getters locaux vs getters UTC

Pourquoi les logs semblent « faux »

Conseils pratiques

Chaînes ISO 8601 : le format le plus sûr pour les APIs

Utilisez UTC explicite ou un décalage explicite

Évitez les chaînes ambiguës

Round-trip en sécurité (chaîne → Date → chaîne)

Pièges du parsing : Date.parse et différences entre navigateurs

Pourquoi Date.parse() peut varier

Le cas surprenant : YYYY-MM-DD

Checklist de parsing : saisie utilisateur vs saisie serveur

Utilisez des règles explicites (pas des heuristiques)

Formatage pour les humains avec Intl.DateTimeFormat

Pourquoi c'est mieux que d'assembler à la main

Options courantes que vous utiliserez réellement

Un pattern UI pratique

Heure d'été (DST) : le bug caché « moins une heure »

Heures locales manquantes et dupliquées

Ajouter 24 heures vs « même heure locale demain »

Pourquoi setHours peut vous surprendre

Approches plus sûres

Durées vs Dates : n'utilisez pas Date pour un minuteur

Pourquoi Date est le mauvais outil pour les durées

Conversion secondes → HH:mm:ss

Comparaisons, tri et plages sans surprises

Comparaisons sûres (les timestamps gagnent)

Tri et filtrage par plage

« Début/fin de journée » (local vs UTC)

Checklist de débogage : comment diagnostiquer un bug de conversion temporelle

1) Capturez les « trois vues » du même instant

2) Vérifiez l'environnement : fuseau horaire et locale

3) Ajoutez des tests là où le temps casse le plus souvent

Checklist rapide avant publication

Patterns recommandés pour une gestion fiable du temps

Ensemble simple de bonnes pratiques

Guide de décision : DB vs API vs UI

Quand une librairie vaut le coup

Le bug classique : passer des secondes à `Date()`

Pourquoi `Date.parse()` peut varier

Le cas surprenant : `YYYY-MM-DD`

Pourquoi `setHours` peut vous surprendre

Pourquoi `Date` est le mauvais outil pour les durées

Conversion secondes → `HH:mm:ss`