Travail avec les dates et l'heure en JavaScript : niveau avancé

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Introduction

\n

Travailler avec les dates et l'heure est l'une des tâches les plus courantes, mais aussi les plus délicates en développement web. L'objet standard Date en JavaScript, malgré sa polyvalence, présente un certain nombre de limitations : absence de prise en charge intégrée des fuseaux horaires (sauf UTC et l'heure locale), méthodes peu pratiques pour le formatage et difficultés à calculer la différence entre les dates. Dans cet article, nous allons explorer les techniques avancées de travail avec les dates dans l'environnement Node.js, qui vous aideront à écrire un code fiable et compréhensible.

\n\n

1. Intl.DateTimeFormat : Un formatage puissant sans bibliothèques externes

\n

Le JavaScript moderne fournit l'API intégrée Intl.DateTimeFormat, qui permet de formater les dates et l'heure de manière flexible en fonction de la locale. C'est un outil idéal si vous n'avez pas besoin de toute la puissance des bibliothèques externes.

\n\n

Utilisation de base

\n

Créez une instance du formateur en passant la locale et un objet avec des options :

\n
const date = new Date('2024-12-25T10:30:00Z');\n\n// Formatage pour la locale russe\nconst ruFormatter = new Intl.DateTimeFormat('ru-RU', {\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n  weekday: 'long',\n  hour: '2-digit',\n  minute: '2-digit',\n  timeZone: 'Europe/Moscow'\n});\n\nconsole.log(ruFormatter.format(date));\n// Affichage : "среда, 25 декабря 2024 г. в 13:30"
\n\n

Gestion des fuseaux horaires

\n

L'avantage clé de Intl.DateTimeFormat est la prise en charge des fuseaux horaires via l'option timeZone. Vous pouvez afficher la même date dans différents fuseaux :

\n
const date = new Date();\n\nconst formatters = {\n  'New York': new Intl.DateTimeFormat('en-US', { timeZone: 'America/New_York', dateStyle: 'full', timeStyle: 'long' }),\n  'Tokyo': new Intl.DateTimeFormat('ja-JP', { timeZone: 'Asia/Tokyo', dateStyle: 'full', timeStyle: 'long' }),\n  'Londres': new Intl.DateTimeFormat('en-GB', { timeZone: 'Europe/London', dateStyle: 'full', timeStyle: 'long' })\n};\n\nfor (const [city, fmt] of Object.entries(formatters)) {\n  console.log(`${city}: ${fmt.format(date)}`);\n}
\n\n

Formatage des plages de dates

\n

L'API sait également formater des plages avec la méthode formatRange :

\n
const start = new Date('2024-01-01');\nconst end = new Date('2024-01-05');\n\nconst rangeFormatter = new Intl.DateTimeFormat('ru-RU', {\n  month: 'long',\n  day: 'numeric'\n});\n\nconsole.log(rangeFormatter.formatRange(start, end));\n// Affichage : "1–5 января"
\n\n

2. Manipulations de dates : ajout, soustraction et différence

\n

Le Date standard est peu adapté à l'arithmétique. Examinons deux approches : le JavaScript pur et les bibliothèques populaires.

\n\n

JavaScript pur : travail avec les millisecondes

\n

La méthode la plus simple consiste à convertir la date en timestamp Unix (millisecondes depuis le 1er janvier 1970) et à effectuer les opérations :

\n
function addDays(date, days) {\n  const result = new Date(date);\n  result.setTime(result.getTime() + days * 24 * 60 * 60 * 1000);\n  return result;\n}\n\nfunction diffDays(date1, date2) {\n  const msDiff = Math.abs(date2.getTime() - date1.getTime());\n  return Math.floor(msDiff / (1000 * 60 * 60 * 24));\n}\n\nconst today = new Date('2024-10-01');\nconst future = addDays(today, 30);\nconsole.log(future); // 2024-10-31\nconsole.log(diffDays(today, future)); // 30
\n

Inconvénient : ne tient pas compte du passage à l'heure d'été, des secondes intercalaires et de la durée variable des mois.

\n\n

Bibliothèque date-fns : approche fonctionnelle et légère

\n

date-fns est une bibliothèque modulaire où chaque fonction est un module séparé. Cela permet de ne pas alourdir le bundle :

\n
// Installation : npm install date-fns\nconst { addDays, subMonths, differenceInDays, format } = require('date-fns');\nconst { ru } = require('date-fns/locale');\n\nconst startDate = new Date(2024, 0, 15); // 15 janvier 2024\n\nconst plusWeek = addDays(startDa                

Blogs

Book Recommendations