JS protip : Formatter un intervalle de dates

Par Christophe Porteneuve • Publié le 27 octobre 2022 • 2 min

Hier, nous parlions du formatage de dates et d’heures, aujourd’hui nous allons voir comment formater des intervalles de dates et d’heures de façon élégante !

formatRange(), la classe mondiale

Peu de gens ont remarqué que DateTimeFormat s’est doté un peu plus tard d’une gestion des intervalles, extrêmement utile pour formater des réunions, évènements, etc. qui ont un horodatage de début et de fin.

J’ai moi-même eu à implémenter ce genre de trucs (en Ruby par exemple) et pour que ce soit joli, c’est la plaie : suivant qu’on est sur le même jour, ou le même mois, ou la même année, etc. on ne veut pas forcément répéter la totale pour le début et la fin. Sans parler des formats courts (à base de tiret semi-cadratin par exemple en français) et longs (« du… au… » ou « de… à… », par exemple). C’est vite l’enfer !

Mais plus maintenant :

// 🤩 LES INTERVAAAAAAALLES !

const datesFR = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium' })
const stampsFR = new Intl.DateTimeFormat('fr-FR', {
  dateStyle: 'long',
  timeStyle: 'short',
})

const datesUS = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' })
const stampsDE = new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'long',
  timeStyle: 'short',
})

const oct26 = new Date(2022, 9, 26, 9)
const oct26pm = new Date(2022, 9, 26, 15)
const oct28 = new Date(2022, 9, 28, 9)
const nov4 = new Date(2022, 10, 4, 23, 11)
const may18 = new Date(2023, 4, 18, 23, 10)

datesFR.formatRange(oct26, oct26) // => '26 oct. 2022' (assez malin pour ne rien répéter)
datesFR.formatRange(oct26, oct28) // => '26–28 oct. 2022' (ne distingue que le jour)
datesFR.formatRange(oct26, nov4) // => '26 oct. – 4 nov. 2022' (distingue jour/mois)
datesFR.formatRange(oct26, may18) // => '26 oct. 2022 – 18 mai 2023' (distingue tout)

stampsFR.formatRange(oct26, oct26) // => '26 octobre 2022 à 09:00'
stampsFR.formatRange(oct26, oct26pm) // => '26 octobre 2022, 09:00 – 15:00'
stampsFR.formatRange(oct26, oct28) // => '26 octobre 2022 à 09:00 – 28 octobre 2022 à 09:00'

datesUS.formatRange(oct26, oct28) // => 'Oct 26 – 28, 2022'
datesUS.formatRange(oct26, nov4) // => 'Oct 26 – Nov 4, 2022'
datesUS.formatRange(oct26, may18) // => 'Oct 26, 2022 – May 18, 2023'

stampsDE.formatRange(oct26, oct26pm) // => '26. Oktober 2022, 09:00–15:00 Uhr'
stampsDE.formatRange(oct26, nov4) // => '26. Oktober 2022 um 09:00 – 4. November 2022 um 23:11'

Remarque notamment la forte variation de format côté allemand, selon que les heures sont dans la même journée ou pas. Franchement c’est trop fort, ça me fait des papillons dans le ventre 🤩

Envie d’aller plus loin ?

Tu as de la veine, outre le protip d’hier sur le formatage de dates et d’heures, on en a un troisième demain sur les distances temporelles !

C’est dispo où ?

Bin écoute, partout. Si on prend tout ce que je t’ai montré ici, tu es tranquille sur tout navigateur qui a, disons, moins de 3 ans, ainsi que depuis Node 13 et Deno 1.8. Donc vas-y !

Des astuces en veux-tu en voilà !

On a tout plein d’articles et de vidéos existants et encore beaucoup à venir. Pour ne rien manquer, tu devrais penser à t’abonner à notre newsletter, à notre chaîne YouTube, nous suivre sur Twitter ou encore mieux, à suivre une de nos formations du feu de dieu 🔥 !