Une introduction aux dates et aux heures en JavaScript

Travailler avec des dates est un aspect important de la programmation. L’objet date intégré est utilisé pour travailler avec des dates et des heures en JavaScript. Les différentes méthodes de l’objet date rendent la tâche beaucoup plus facile lorsque vous travaillez avec des dates et des heures.

Dans cet article, vous apprendrez tout ce que vous devez savoir sur l’utilisation des dates en JavaScript. Alors, sans plus tarder, entrons.

Comment créer des objets de date

Vous pouvez créer un objet date en JavaScript en utilisant les quatre méthodes suivantes :

1. nouvelle date()

le nouvelle date() le constructeur crée un objet date avec la date et l’heure actuelles.

let d = new Date();
console.log(d);

Sortir:

Mon Jan 03 2022 20:27:58 GMT+0530 (India Standard Time)

2. nouvelle date (chaîne de dates)

le nouvelle date (chaîne de dates) Le constructeur crée un objet date à partir d’une chaîne de date.

let d = new Date("2022-01-01");
console.log(d);

Sortir:

Sat Jan 01 2022 05:30:00 GMT+0530 (India Standard Time)

3. nouvelle date (millisecondes)

le nouvelle date (millisecondes) Le constructeur crée un objet date en ajoutant les millisecondes à l’heure zéro. Le paramètre représente le temps écoulé en millisecondes depuis le 1er janvier 1970 UTC.

let d1 = new Date(0);
console.log(d1);
let d2 = new Date(973436457364);
console.log(d2);

Sortir:

Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)
Sun Nov 05 2000 20:30:57 GMT+0530 (India Standard Time)

MAKEUSEDE LA VIDÉO DU JOUR

4. nouvelle date (année, mois, jour, heures, minutes, secondes, millisecondes)

le nouvelle date (année, mois, jour, heures, minutes, secondes, millisecondes) Le constructeur crée un objet date avec une date et une heure spécifiées. Les sept paramètres spécifient respectivement l’année, le mois, le jour, les heures, les minutes, les secondes et les millisecondes.

let d = new Date(2020, 10, 11, 15, 29, 46, 0);
console.log(d);

Sortir:

Wed Nov 11 2020 15:29:46 GMT+0530 (India Standard Time)

Vous pouvez également créer un objet date avec six, quatre, trois ou deux paramètres.

a) Les six paramètres spécifient l’année, le mois, le jour, l’heure, la minute et la seconde.

b) Les cinq paramètres spécifient l’année, le mois, le jour, l’heure et la minute.

c) Les quatre paramètres spécifient l’année, le mois, le jour et l’heure.

d) Les trois paramètres spécifient l’année, le mois et le jour.

e) Les deux paramètres spécifient l’année et le mois.

Noter:

• JavaScript compte les mois de 0 à 11, c’est-à-dire que janvier est représenté par 0 et décembre est représenté par 11.
• Si vous spécifiez des valeurs hors limites dans l’objet Date, il ne générera pas d’erreur à la place, il se corrigera automatiquement.

// March does not have 40 days, the overflow is auto-corrected
let d = new Date(2020, 2, 40);
console.log(d);

Sortir:

Thu Apr 09 2020 00:00:00 GMT+0530 (India Standard Time)

Méthodes d’obtention de la date JavaScript

Vous pouvez utiliser les méthodes suivantes pour obtenir des informations à partir d’un objet date.

1. getFullYear()

Cette méthode renvoie l’année sous la forme d’un nombre à quatre chiffres (aaaa) selon l’heure locale.

let d = new Date();
console.log(d.getFullYear());

Sortir:

2022

2. getMois()

Cette méthode renvoie le mois sous forme de nombre (0-11) selon l’heure locale.

let d = new Date();
console.log(d.getMonth());

Sortir:

0

3. getDate()

Cette méthode renvoie le jour sous la forme d’un nombre (1-31) selon l’heure locale.

let d = new Date();
console.log(d.getDate());

Sortir:

3

En rapport: Une introduction aux types de données en JavaScript

4. getHeures()

Cette méthode renvoie l’heure (0-23) selon l’heure locale.

let d = new Date();
console.log(d.getHours());

Sortir:

22

5. getMinutes()

Cette méthode renvoie la minute (0-59) selon l’heure locale.

let d = new Date();
console.log(d.getMinutes());

Sortir:

40

6. getSeconds()

Cette méthode renvoie la seconde (0-59) selon l’heure locale.

let d = new Date();
console.log(d.getSeconds());

Sortir:

30

7. getMilliseconds()

Cette méthode renvoie la milliseconde (0-999) en fonction de l’heure locale.

let d = new Date();
console.log(d.getMilliseconds());

Sortir:

55

En rapport: JavaScript One-Liners que vous devez savoir

8. getTime()

Cette méthode renvoie le temps en millisecondes depuis le 1er janvier 1970.

let d = new Date();
console.log(d.getTime());

Sortir:

1641230088884

9. getDay()

Cette méthode renvoie le jour de la semaine sous forme de nombre (0-6)​​​​​​​ selon l’heure locale.

let d = new Date();
console.log(d.getDay());

Sortir:

1

Noter: Si vous souhaitez travailler avec les dates UTC, vous pouvez utiliser les méthodes de date suivantes : getUTCDate()​​​​​​​, getUTCDay()​​​​​​​, getUTCFullYear()​​​​​​​, getUTCHours()​​​​​​​, getUTCMilliseconds(), getUTCMinutes()​​​​​​​​, getUTCMois(), et getUTCSeconds().

Méthodes de définition de date JavaScript

Vous pouvez utiliser les méthodes suivantes pour définir une partie d’un objet date.

1. setDate()

Cette méthode définit le jour sous la forme d’un nombre (1-31) pour une date spécifiée en fonction de l’heure locale.

let d = new Date();
d.setDate(20);
console.log(d);

Sortir:

Thu Jan 20 2022 22:58:59 GMT+0530 (India Standard Time)

En rapport: Méthodes mathématiques JavaScript que vous devriez maîtriser aujourd’hui

2. setFullYear()

​​​​​​​Cette méthode définit l’année pour une date spécifiée en fonction de l’heure locale.

let d = new Date();
d.setFullYear(2016);
console.log(d);

Sortir:

Sun Jan 03 2016 23:00:41 GMT+0530 (India Standard Time)

3. setHeures()

Cette méthode définit l’heure (0-23)​​​​​​​ d’une date spécifiée en fonction de l’heure locale.

let d = new Date();
d.setHours(15);
console.log(d);

Sortir:

Mon Jan 03 2022 15:02:01 GMT+0530 (India Standard Time)

​​​​​​​Connexe : Comment créer une calculatrice simple à l’aide de HTML, CSS et JavaScript

4. setMilliseconds()

Cette méthode définit les millisecondes (0-999)​​​​​​​ pour une date spécifiée en fonction de l’heure locale.

let d = new Date();
d.setMilliseconds(548);
console.log(d);

Sortir:

Mon Jan 03 2022 23:04:13 GMT+0530 (India Standard Time)

De même, vous pouvez utiliser le setMinutes()​​​​​​​​, setMonth()​​​​​​​​, et setSecondes() méthodes pour régler les minutes (0-59), le mois (0-11)​​​​​​​ et les secondes (0-59) respectivement pour une date spécifiée en fonction de l’heure locale.

Exemple d’heure actuelle en JavaScript

Un exemple simple pour imprimer l’heure actuelle du système :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Current Time</title>
</head>
<body>
<p id="target"></p>
</body>
<script type="text/javascript">
var current = new Date();
var hour = current.getHours();
var minute = current.getMinutes();
document.getElementById('target').innerHTML = hour + ":" + minute;
</script>
</html>

Si vous souhaitez consulter le code source complet utilisé dans cet article, voici le Dépôt GitHub.​​​​​​​

Développer des projets à l’aide des concepts de date de JavaScript

Vous rencontrerez de nombreuses instances de dates JavaScript lorsque vous travaillerez sur des applications réelles. Si vous souhaitez démarrer avec un projet simple et acquérir une expérience pratique, vous pouvez développer une horloge numérique à l’aide de HTML, CSS et JavaScript. En plus des dates, vous apprendrez également quelques concepts JavaScript importants tels que l’utilisation de variables, l’utilisation de fonctions, l’accès et l’ajout de propriétés au DOM, etc.

Comment créer une horloge numérique à l’aide de HTML, CSS et JavaScript

Codez-vous jusqu’à ce que le gazouillis des oiseaux vous informe que c’est le matin ? Gardez une trace du temps avec cette horloge personnalisée.

Lire la suite

A propos de l’auteur

Yuvraj Chandra
(80 articles publiés)

Yuvraj est un étudiant de premier cycle en informatique à l’Université de Delhi, en Inde. Il est passionné par le développement Web Full Stack. Lorsqu’il n’écrit pas, il explore la profondeur de différentes technologies.

Plus de Yuvraj Chandra

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner

— to www.makeuseof.com