Guide de formatage des dates en JavaScript : comment formater correctement les dates avec des exemples

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction : Pourquoi le formatage des dates est important en JavaScript

Dans le développement web avec JavaScript, l’affichage et la gestion des dates et heures sont essentiels. Par exemple, les applications de calendrier et les systèmes de gestion de logs nécessitent que les données de date et d’heure soient correctement formatées. Cependant, la manipulation des dates en JavaScript peut sembler un peu complexe pour les débutants.

Dans ce guide, nous présentons des techniques pratiques et des exemples de code pour vous aider à maîtriser le formatage des dates en JavaScript. Du usage de base de l’objet Date à l’utilisation avancée d’Intl.DateTimeFormat, en passant par des comparaisons de bibliothèques externes, cet article offre une explication complète.

Scénarios courants où le formatage des dates est requis

1. Affichage des données dans les applications web :

• Prise en charge des utilisateurs avec différents calendriers et fuseaux horaires.

1. Gestion des logs et débogage :

• Enregistrement des horodatages pour les logs d’erreur et les actions des utilisateurs.

1. Support multilingue :

• Ajustement des formats d’affichage des dates pour les utilisateurs internationaux.

Avantages pour les lecteurs

En lisant ce guide, vous acquerrez les compétences suivantes :

• Comprendre comment travailler avec l’objet Date de base.
• Affichage flexible des dates grâce au formatage manuel et aux méthodes intégrées.
• Codage efficace avec l’aide de bibliothèques de dates externes.

Dans la section suivante, nous examinerons de plus près les fondamentaux de l’objet Date en JavaScript. Le comprendre vous permettra de passer en douceur à des sujets plus avancés par la suite.

2. Bases de la gestion des dates en JavaScript : Qu’est‑ce que l’objet Date ?

En JavaScript, l’objet Date est utilisé pour gérer les dates et les heures. Comprendre cet objet est la première étape pour gérer correctement le formatage des dates. Cette section explique l’utilisation de base de l’objet Date.

2.1 Comment créer un objet Date

Un objet Date peut être créé de la manière suivante.

1. Obtenir la date et l’heure actuelles

   const today = new Date();
   console.log(today); // Outputs the current date and time
   

2. Définir une date et une heure spécifiques

   const customDate = new Date(2024, 11, 28); // Year, month (starts from 0), day
   console.log(customDate); // December 28, 2024
   

3. Créer une date à partir d’une chaîne

   const dateFromString = new Date('2024-12-28');
   console.log(dateFromString); // Date converted from ISO format
   

4. Créer une date à partir d’un timestamp

   const timestampDate = new Date(1703740800000); // Milliseconds
   console.log(timestampDate); // Date represented by the timestamp
   

2.2 Méthodes pour récupérer les composants de date et d’heure

L’objet Date fournit des méthodes pour récupérer les composants individuels de date et d’heure.

2.3 Travailler avec les fuseaux horaires et UTC

Obtenir l’heure locale :

const date = new Date();
console.log(date.toString()); // Local time

Obtenir l’heure UTC :

console.log(date.toUTCString()); // UTC-based time

Obtenir le décalage du fuseau horaire :

console.log(date.getTimezoneOffset()); // -540 (in minutes, for Japan Standard Time)

Résumé

Dans cette section, nous avons expliqué les bases de l’objet Date en JavaScript, y compris comment créer des dates et récupérer ou manipuler les composants de date. Dans la section suivante, nous approfondirons les méthodes spécifiques de formatage des dates en JavaScript.

3. Trois façons de formater les dates en JavaScript

JavaScript offre plusieurs façons de formater les dates en différentes représentations. Dans cette section, nous détaillons trois approches : formatage manuel, méthodes intégrées, et options de formatage avancées.

3.1 Formatage manuel : des bases à l’utilisation pratique

Exemple de format personnalisé simple

const date = new Date();
const year = date.getFullYear(); // Year
const month = ('0' + (date.getMonth() + 1)).slice(-2); // Month (zero-padded)
const day = ('0' + date.getDate()).slice(-2); // Day (zero-padded)

javascript const formattedDate = ${year}-${month}-${day}; console.log(formattedDate); // Exemple : 2024-12-28

### 3.2 Locale-Aware Formatting with `toLocaleDateString()`



#### Basic Usage

const date = new Date(); console.log(date.toLocaleDateString(‘ja-JP’)); // Exemple : 2024/12/28

#### Customization with Options

const options = { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ }; console.log(date.toLocaleDateString(‘ja-JP’, options)); // Exemple : 2024/12/28

### 3.3 Advanced Customization: Using Intl.DateTimeFormat



#### Basic Usage

const date = new Date(); const formatter = new Intl.DateTimeFormat(‘ja-JP’, { dateStyle: ‘full’ }); console.log(formatter.format(date)); // Exemple : samedi 28 décembre 2024

### Summary



In this section, we introduced three different ways to format dates in JavaScript. In the next section, we will explain how to improve efficiency by using external libraries for date handling.







## 4. Using External Libraries: Comparing Moment.js, date-fns, and Day.js



While JavaScript’s built-in date methods are powerful, using **external libraries** can make complex formatting and processing more concise and efficient.



### 4.1 Moment.js: A Proven Library for Legacy Systems



#### Basic Usage

const moment = require(‘moment’); // Importation dans un environnement Node.js const now = moment(); // Date et heure actuelles console.log(now.format(‘YYYY-MM-DD HH:mm:ss’)); // Exemple : 2024-12-28 14:30:45

### 4.2 date-fns: A Modular Library for Modern Projects



#### Basic Usage

import { format, addDays } from ‘date-fns’;

const now = new Date(); console.log(format(now, ‘yyyy-MM-dd’)); // Exemple : 2024-12-28

const nextWeek = addDays(now, 7); console.log(format(nextWeek, ‘yyyy-MM-dd’)); // Exemple : 2025-01-04

### 4.3 Day.js: A Lightweight, Moment-Compatible Modern Library



#### Basic Usage

const dayjs = require(‘dayjs’);

const now = dayjs(); console.log(now.format(‘YYYY-MM-DD’)); // Exemple : 2024-12-28

const nextWeek = now.add(7, ‘day’); console.log(nextWeek.format(‘YYYY-MM-DD’)); // Exemple : 2025-01-04

### 4.4 Library Comparison Table


Library
Features
File Size
Recommended Use
Moment.js
Feature-rich and widely adopted
~300KB
Maintaining legacy systems
date-fns
Modular, lightweight, modern JavaScript support
~25KB
Modern projects and lightweight environments
Day.js
Lightweight, Moment-compatible, extensible via plugins
~2KB
Fast and lightweight front-end development




### Summary



In this section, we compared popular **external libraries** that simplify date handling in JavaScript. In the next section, we will introduce **practical application examples** using these formatting techniques.



## 5. Practical Examples: Applications Using Date Formatting



### 5.1 Displaying Dates in a Calendar Application



#### Implementation Example

const selectedDate = new Date(); // Date sélectionnée par l’utilisateur

const formattedDate = selectedDate.toLocaleDateString(‘ja-JP’, { year: ‘numeric’, month: ‘long’, day: ‘numeric’, weekday: ‘long’ });

console.log(Selected date: ${formattedDate}); // Exemple : Date sélectionnée : samedi 28 décembre 2024

### 5.2 Managing Timestamps in Log Files



#### Implementation Example

const logTime = new Date().toISOString(); // Obtenir la date et l’heure au format ISO console.log([LOG] ${logTime}: Process started); // Exemple : [LOG] 2024-12-28T05:30:00.000Z: Processus démarré

### 5.3 Validating and Formatting Form Input Dates



#### Implementation Example

function formatInputDate(inputDate) { const date = new Date(inputDate); // Convertir la chaîne d’entrée en objet Date

if (isNaN(date)) { console.log(‘Invalid date format.’); return null; }

return date.toLocaleDateString(‘ja-JP’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ }); }

console.log(formatInputDate(‘2024-12-28’)); // Exemple : 2024/12/28

### Summary



In this section, we introduced practical examples of using date formatting in JavaScript, including calendar displays, log management, and form validation. In the next section, we address frequently asked questions (FAQ) and provide solutions to common issues.







## 6. Frequently Asked Questions (FAQ)

Q1 : Comment afficher les dates et heures au format ISO ?

Réponse

Le format ISO est une norme internationale pour la représentation des dates et heures et est largement utilisé dans les bases de données et les communications API. En JavaScript, vous pouvez utiliser la méthode toISOString() de l’objet Date.

Exemple de code

const date = new Date();
console.log(date.toISOString()); // Example: 2024-12-28T05:30:00.000Z

Q2 : Comment gérer la différence entre l’heure UTC et l’heure locale ?

Réponse

Par défaut, JavaScript utilise l’heure locale, mais il fournit également des méthodes pour convertir vers et depuis UTC.

Exemple de code

Convertir l’heure locale en UTC :

const date = new Date();
console.log(date.toUTCString()); // Example: Sat, 28 Dec 2024 05:30:00 GMT

Convertir l’UTC en heure locale :

const date = new Date('2024-12-28T05:30:00Z'); 
console.log(date.toString()); 
// Example: Sat Dec 28 2024 14:30:00 GMT+0900 (Japan Standard Time)

Q3 : Quelle est la façon la plus simple de gérer le remplissage de zéros dans le formatage des dates ?

Réponse

function zeroPad(number) {
  return number.toString().padStart(2, '0');
}

const date = new Date();
const formattedDate = `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`;
console.log(formattedDate); // Example: 2024-12-28

Résumé

Dans cette section, nous avons abordé les questions fréquentes concernant le formatage des dates en JavaScript et fourni des solutions pratiques. Dans la section suivante, nous conclurons l’article avec un résumé et un plan d’action pour appliquer ce que vous avez appris.

7. Conclusion et étapes pratiques suivantes

7.1 Points clés de cet article

1. Bases de l’objet Date en JavaScript : nous avons expliqué comment créer des objets Date et utiliser les méthodes pour récupérer et manipuler les valeurs de date et d’heure.
2. Trois approches de formatage de dates : formatage manuel, méthodes intégrées et utilisation de bibliothèques externes.
3. Cas d’utilisation pratiques : exemples concrets tels que les calendriers, la gestion des journaux et la validation de formulaires.
4. FAQ : défis courants et solutions éprouvées pour le formatage des dates.

7.2 Plan d’action pour une mise en œuvre pratique

1. Essayez les exemples de code : exécutez le code d’exemple dans un éditeur en ligne ou votre environnement de développement local pour approfondir votre compréhension.
2. Appliquez aux projets réels : intégrez le formatage des dates dans des projets concrets en ajoutant des fonctionnalités de calendrier ou de gestion des journaux.
3. Comparez les bibliothèques : testez Moment.js, date-fns et Day.js pour déterminer celle qui correspond le mieux aux exigences de votre projet.

7.3 Conclusion

Le formatage des dates en JavaScript va des opérations simples à la personnalisation avancée et aux puissantes bibliothèques externes. Utilisez ce guide comme référence pour implémenter une gestion des dates efficace, flexible et maintenable dans vos applications.