Learn Time | JavaScript Tutorial

📝 Ce que vous apprendrez

Comment travailler avec des dates en JavaScript
Comment créer un objet Date ?
Méthodes pour obtenir et fixer des valeurs de date
Formatage des dates en JavaScript
Cas d'utilisation courants des dates

🔍 Qu'est-ce qu'une date en JavaScript ?

En JavaScript, l'objet Date est utilisé pour gérer les dates et les heures. Il fournit diverses méthodes pour travailler avec les dates, telles que l'obtention de la date actuelle, la manipulation des valeurs de date et le formatage des dates de manière lisible.

Exemple :

let today = new Date();
console.log(today);  // Output: current date and time (e.g., "Thu Apr 22 2025 15:30:00 GMT+0000 (UTC)")

🧑‍🍳 Création d'un objet date

Vous pouvez créer un objet Date en JavaScript en utilisant le constructeur new Date(). Il peut être initialisé de différentes manières :

1️⃣ Date et heure actuelles

let currentDate = new Date();
console.log(currentDate);  // Output: current date and time

2️⃣ Date et heure spécifiques

Vous pouvez également créer un objet Date avec une date et une heure spécifiques en passant une chaîne de caractères ou des valeurs numériques :

let specificDate = new Date("2025-04-22T10:30:00");
console.log(specificDate);  // Output: Tue Apr 22 2025 10:30:00 GMT+0000 (UTC)

Vous pouvez également transmettre des valeurs distinctes pour l'année, le mois, le jour, les heures, les minutes, les secondes et les millisecondes :

let customDate = new Date(2025, 3, 22, 10, 30, 0);  // Note: month is 0-based (3 = April)
console.log(customDate);  // Output: Tue Apr 22 2025 10:30:00 GMT+0000 (UTC)

🧑‍🍳 Obtenir des composants de date

Vous pouvez extraire divers composants d'un objet Date, tels que l'année, le mois, le jour et l'heure, à l'aide des méthodes correspondantes :

1️⃣ Obtenir l'année complète

let today = new Date();
console.log(today.getFullYear());  // Output: current year (e.g., 2025)

2️⃣ Obtenir le mois

let today = new Date();
console.log(today.getMonth());  // Output: current month (0-based, 0 = January, 1 = February, etc.)

3️⃣ Obtenir le jour du mois

let today = new Date();
console.log(today.getDate());  // Output: current day of the month (e.g., 22)

4️⃣ Obtenir le jour de la semaine

let today = new Date();
console.log(today.getDay());  // Output: current day of the week (0 = Sunday, 1 = Monday, etc.)

5️⃣ Obtenir les heures, minutes, secondes et millisecondes

let today = new Date();
console.log(today.getHours());  // Output: current hours
console.log(today.getMinutes());  // Output: current minutes
console.log(today.getSeconds());  // Output: current seconds
console.log(today.getMilliseconds());  // Output: current milliseconds

🧑‍🍳 Setting Date Components

Vous pouvez également modifier les composants d'un objet Date à l'aide des méthodes setter.

1️⃣ Définition de l'année complète

let today = new Date();
today.setFullYear(2023);
console.log(today);  // Output: New date with the year set to 2023

2️⃣ Définition du mois

let today = new Date();
today.setMonth(11);  // December (Note: months are 0-based)
console.log(today);  // Output: New date with the month set to December

3️⃣ Réglage de la date

let today = new Date();
today.setDate(15);  // 15th day of the current month
console.log(today);  // Output: New date with the day set to 15

4️⃣ Réglage des heures, minutes, secondes et millisecondes

let today = new Date();
today.setHours(18);
today.setMinutes(45);
today.setSeconds(30);
today.setMilliseconds(500);
console.log(today);  // Output: New date with the time set to 18:45:30.500

🧑‍🍳 Formatage de la date

JavaScript fournit quelques méthodes intégrées pour formater les dates. Cependant, pour un formatage plus avancé, vous pouvez avoir besoin de bibliothèques externes comme Date-fns ou Moment.js.

1️⃣ toLocaleDateString()

La méthode toLocaleDateString() renvoie une date sous forme de chaîne de caractères au format local.

let today = new Date();
console.log(today.toLocaleDateString());  // Output: formatted date in local format (e.g., "4/22/2025" for US)

Vous pouvez également passer des options pour personnaliser le format :

let today = new Date();
console.log(today.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }));
// Output: "April 22, 2025"

2️⃣ toLocaleString()

La méthode toLocaleString() formate à la fois la date et l'heure.

let today = new Date();
console.log(today.toLocaleString());  // Output: formatted date and time (e.g., "4/22/2025, 3:30:00 PM")

3️⃣ toISOString()

La méthode toISOString() renvoie la date sous la forme d'une chaîne ISO 8601.

let today = new Date();
console.log(today.toISOString());  // Output: "2025-04-22T15:30:00.000Z"

🧑‍🍳 Travailler avec les fuseaux horaires

L'objet Date de JavaScript utilise par défaut le fuseau horaire UTC. Pour convertir les fuseaux horaires, vous pouvez utiliser des méthodes comme toLocaleString() ou des bibliothèques comme Luxon ou Moment.js.

💡 Cas d'utilisation courants pour les dates

Voici quelques scénarios courants dans lesquels vous pouvez travailler avec des dates en JavaScript :

Affichage de la date et de l'heure actuelles
Calculer la différence entre deux dates
Validation des données saisies par l'utilisateur (par exemple, la date de naissance)**.
Affichage des événements à venir

🧠 Recap

L'objet Date en JavaScript permet de créer et de manipuler des dates et des heures.
Vous pouvez utiliser diverses méthodes comme .getFullYear(), .getMonth(), .getDate() pour extraire les composants de la date, et .setFullYear(), .setMonth(), .setDate() pour les modifier.
Le formatage de la date peut être effectué en utilisant .toLocaleDateString(), .toLocaleString(), et .toISOString().
L'objet Date de JavaScript fonctionne en UTC, et vous pouvez avoir besoin de bibliothèques pour travailler avec des fuseaux horaires.