Manipuler les dates avec l'objet Date de JavaScript

Introduction

Dans ce laboratoire, les participants exploreront l'objet Date puissant de JavaScript et apprendront les techniques essentielles pour manipuler les dates et les heures. Par une approche pratique et complète, les étudiants découvriront comment créer des objets Date à l'aide de diverses méthodes d'initialisation, récupérer des composants de date spécifiques, formater et afficher des informations de date, modifier des dates à l'aide de méthodes de définition et effectuer des calculs de date complexes.

Le laboratoire fournit des conseils pratiques et étape par étape sur la manipulation des dates en JavaScript, couvrant des compétences fondamentales telles que la création d'objets Date à partir de l'heure actuelle, de timestamps spécifiques, de chaînes de date et de millisecondes depuis l'époque Unix. À la fin de ce laboratoire, les participants auront acquis une compréhension solide des techniques de manipulation de dates, leur permettant de gérer efficacement les tâches liées aux dates dans leurs applications JavaScript.

Créer un nouvel objet Date

Dans cette étape, vous allez apprendre à créer de nouveaux objets Date en JavaScript, ce qui est fondamental pour travailler avec les dates et les heures. L'objet Date de JavaScript vous permet de travailler facilement avec les dates et les heures.

Tout d'abord, ouvrez l'IDE Web et créez un nouveau fichier JavaScript appelé dates.js dans le répertoire ~/projet.

Créez un nouvel objet Date avec différentes méthodes d'initialisation :

// Crée un objet Date représentant la date et l'heure actuelles
let currentDate = new Date();
console.log("Date actuelle :", currentDate);

// Crée un objet Date avec une date et une heure spécifiques
let specificDate = new Date(2023, 5, 15, 10, 30, 0);
console.log("Date spécifique :", specificDate);

// Crée un objet Date à partir d'une chaîne de date
let stringDate = new Date("2023-06-15");
console.log("Date à partir de la chaîne :", stringDate);

// Crée un objet Date en utilisant les millisecondes depuis l'époque Unix
let millisecondDate = new Date(1686816000000);
console.log("Date à partir des millisecondes :", millisecondDate);

Sortie d'exemple :

Date actuelle : Thu Jun 15 2023 12:00:00 GMT+0000 (Coordinated Universal Time)
Date spécifique : Thu Jun 15 2023 10:30:00 GMT+0000 (Coordinated Universal Time)
Date à partir de la chaîne : Thu Jun 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
Date à partir des millisecondes : Thu Jun 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Points clés à retenir :

• new Date() crée un objet Date avec la date et l'heure actuelles
• new Date(year, month, day, hours, minutes, seconds) permet de créer une date spécifique
• Les mois sont indexés à partir de zéro (0-11), donc juin est représenté par 5
• Vous pouvez créer des dates à partir de chaînes ou de millisecondes depuis l'époque Unix (1er janvier 1970)

Récupérer les composants de la date actuelle

Dans cette étape, vous allez apprendre à extraire des composants spécifiques d'un objet Date. En vous appuyant sur l'étape précédente, nous utiliserons le fichier dates.js pour démontrer diverses méthodes de récupération des composants de date et d'heure.

Ouvrez le fichier ~/projet/dates.js et ajoutez le code suivant :

// Crée un objet de date actuel
let currentDate = new Date();

// Récupère les composants de date individuels
let year = currentDate.getFullYear();
let month = currentDate.getMonth(); // 0-11 (0 = janvier)
let day = currentDate.getDate(); // Jour du mois
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = currentDate.getSeconds();
let milliseconds = currentDate.getMilliseconds();

// Affiche les composants individuels
console.log("Année :", year);
console.log("Mois :", month + 1); // Ajoute 1 pour afficher le numéro du mois réel
console.log("Jour du mois :", day);
console.log("Heures :", hours);
console.log("Minutes :", minutes);
console.log("Secondes :", seconds);
console.log("Millisecondes :", milliseconds);

// Obtenir le jour de la semaine
let dayOfWeek = currentDate.getDay(); // 0-6 (0 = dimanche)
console.log("Jour de la semaine :", dayOfWeek);

// Obtenir le timestamp (millisecondes depuis l'époque Unix)
let timestamp = currentDate.getTime();
console.log("Timestamp :", timestamp);

Sortie d'exemple :

Année : 2023
Mois : 6
Jour du mois : 15
Heures : 12
Minutes : 30
Secondes : 45
Millisecondes : 123
Jour de la semaine : 4
Timestamp : 1686816045123

Points clés à retenir :

• getFullYear() renvoie l'année sur quatre chiffres
• getMonth() renvoie 0-11, donc ajoutez 1 pour obtenir le numéro du mois réel
• getDate() renvoie le jour du mois (1-31)
• getDay() renvoie le jour de la semaine (0-6)
• getTime() renvoie les millisecondes depuis le 1er janvier 1970

Formater et afficher des informations de date

Dans cette étape, vous allez apprendre diverses méthodes pour formater et afficher des informations de date en JavaScript. Ouvrez le fichier ~/projet/dates.js et ajoutez le code suivant pour explorer différentes techniques de formatage :

// Crée un objet de date actuel
let currentDate = new Date();

// Méthode 1 : Utilisation de toLocaleDateString()
let localeDateString = currentDate.toLocaleDateString();
console.log("Chaîne de date locale :", localeDateString);

// Méthode 2 : Utilisation de toDateString()
let dateString = currentDate.toDateString();
console.log("Chaîne de date :", dateString);

// Méthode 3 : Utilisation de toLocaleString()
let localeString = currentDate.toLocaleString();
console.log("Chaîne locale :", localeString);

// Méthode 4 : Formatage personnalisé
let customFormat =
  `${currentDate.getFullYear()}-` +
  `${(currentDate.getMonth() + 1).toString().padStart(2, "0")}-` +
  `${currentDate.getDate().toString().padStart(2, "0")}`;
console.log("Format personnalisé :", customFormat);

// Méthode 5 : API d'internationalisation
let options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};
let intlFormat = currentDate.toLocaleDateString("en-US", options);
console.log("Format internationalisé :", intlFormat);

Sortie d'exemple :

Chaîne de date locale : 15/06/2023
Chaîne de date : Thu Jun 15 2023
Chaîne locale : 15/06/2023, 12:30:45 PM
Format personnalisé : 2023-06-15
Format internationalisé : Thursday, June 15, 2023

Points clés à retenir :

• toLocaleDateString() fournit une représentation de date localisée
• toDateString() donne une chaîne de date lisible par l'homme
• toLocaleString() inclut à la fois la date et l'heure
• Le formatage personnalisé permet un contrôle précis de l'affichage de la date
• L'API d'internationalisation offre des options de localisation avancées

Modifier une date à l'aide de méthodes de définition

Dans cette étape, vous allez apprendre à modifier les composants d'une date à l'aide des méthodes de définition de la date de JavaScript. Ouvrez le fichier ~/projet/dates.js et ajoutez le code suivant pour explorer différentes manières de modifier les valeurs de date :

// Crée un nouvel objet Date
let modifiableDate = new Date();
console.log("Date d'origine :", modifiableDate);

// Définir une année spécifique
modifiableDate.setFullYear(2024);
console.log("Après avoir défini l'année :", modifiableDate);

// Définir le mois (0-11, donc 5 représente juin)
modifiableDate.setMonth(5);
console.log("Après avoir défini le mois :", modifiableDate);

// Définir le jour du mois
modifiableDate.setDate(15);
console.log("Après avoir défini le jour :", modifiableDate);

// Définir les heures (0-23)
modifiableDate.setHours(14);
console.log("Après avoir défini les heures :", modifiableDate);

// Définir les minutes (0-59)
modifiableDate.setMinutes(30);
console.log("Après avoir défini les minutes :", modifiableDate);

// Définir les secondes (0-59)
modifiableDate.setSeconds(45);
console.log("Après avoir défini les secondes :", modifiableDate);

// Chaîner les méthodes de définition
let customDate = new Date();
customDate.setFullYear(2025).setMonth(11).setDate(31);
console.log("Date personnalisée :", customDate);

Sortie d'exemple :

Date d'origine : Thu Jun 15 2023 12:30:45 GMT+0000
Après avoir défini l'année : Thu Jun 15 2024 12:30:45 GMT+0000
Après avoir défini le mois : Thu Jun 15 2024 12:30:45 GMT+0000
Après avoir défini le jour : Sat Jun 15 2024 12:30:45 GMT+0000
Après avoir défini les heures : Sat Jun 15 2024 14:30:45 GMT+0000
Après avoir défini les minutes : Sat Jun 15 2024 14:30:45 GMT+0000
Après avoir défini les secondes : Sat Jun 15 2024 14:30:45 GMT+0000
Date personnalisée : Wed Dec 31 2025 00:00:00 GMT+0000

Points clés à retenir :

• Les méthodes de définition permettent une modification précise des composants de date
• Les mois sont indexés à partir de zéro (0-11)
• Les heures utilisent le format 24 heures (0-23)
• Les méthodes de définition modifient l'objet Date d'origine
• Vous pouvez chaîner certaines méthodes de définition pour plus de commodité

Effectuer des calculs de dates

Dans cette étape, vous allez apprendre à effectuer diverses calculs de dates à l'aide des méthodes de l'objet Date de JavaScript. Ouvrez le fichier ~/projet/dates.js et ajoutez le code suivant pour explorer différentes techniques de manipulation de dates :

// Crée des objets de date pour les calculs
let currentDate = new Date();
let futureDate = new Date(currentDate.getTime());

// Ajoute des jours à une date
futureDate.setDate(currentDate.getDate() + 30);
console.log("Date actuelle :", currentDate);
console.log("Dans 30 jours :", futureDate);

// Calcule la différence entre deux dates
let differenceInMilliseconds = futureDate.getTime() - currentDate.getTime();
let differenceInDays = Math.floor(
  differenceInMilliseconds / (1000 * 60 * 60 * 24)
);
console.log("Jours entre les dates :", differenceInDays);

// Calcule l'âge ou le temps écoulé
let birthDate = new Date("1990-01-01");
let ageInMilliseconds = currentDate.getTime() - birthDate.getTime();
let ageInYears = Math.floor(ageInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));
console.log("Âge calculé :", ageInYears);

// Trouve le dernier jour du mois en cours
let lastDayOfMonth = new Date(
  currentDate.getFullYear(),
  currentDate.getMonth() + 1,
  0
);
console.log("Dernier jour du mois en cours :", lastDayOfMonth);

// Vérifie si une année est bissextile
function isLeapYear(year) {
  return new Date(year, 1, 29).getMonth() === 1;
}
console.log("L'année 2024 est-elle bissextile?", isLeapYear(2024));

Sortie d'exemple :

Date actuelle : Thu Jun 15 2023 12:30:45 GMT+0000
Dans 30 jours : Sat Jul 15 2023 12:30:45 GMT+0000
Jours entre les dates : 30
Âge calculé : 33
Dernier jour du mois en cours : Wed Jun 30 2023 00:00:00 GMT+0000
L'année 2024 est-elle bissextile? true

Points clés à retenir :

• Utilisez getTime() pour obtenir les millisecondes pour les calculs
• Convertissez les millisecondes en jours en divisant adéquatement
• Vous pouvez ajouter ou soustraire des jours à l'aide de setDate()
• Calculez l'âge ou les différences de temps entre des dates
• Vérifiez les années bissextiles en testant le 29 février

Sommaire

Dans ce laboratoire, les participants ont appris à manipuler les dates à l'aide de l'objet Date de JavaScript grâce à une exploration approfondie des techniques de création, de récupération et de manipulation de dates. Le laboratoire a couvert plusieurs approches pour initialiser les objets Date, y compris la création de dates représentant le moment présent, la spécification de dates exactes avec des paramètres, l'analyse de dates à partir de chaînes de caractères et la génération de dates à partir de timestamps en millisecondes.

Les exercices pratiques ont démontré les compétences clés de manipulation des dates en JavaScript, telles que l'extraction de composants de date spécifiques, le formatage des informations de date, l'application de méthodes de définition pour modifier les dates et la réalisation de calculs de dates. Les participants ont acquis une expérience pratique avec les représentations de mois indexées à partir de zéro, la compréhension de différentes stratégies d'initialisation d'objets Date et l'utilisation des méthodes intégrées de JavaScript pour travailler efficacement avec des données temporelles dans diverses situations de programmation.