Comment afficher la date en JavaScript ?

L'objet Date en JavaScript permet d'afficher la date et l'heure actuelles, ou une date et une heure spécifiées. Par défaut, les informations s'affichent en heure Unix exprimée en millisecondes – c'est-à-dire le temps écoulé depuis le 1er janvier 1970 00:00:00 UTC – ou au format littéral. Le cas échéant, l'objet Date respecte le fuseau horaire et les normes d'écriture anglo-saxonnes. Des méthodes permettent de formater cet affichage, pour le rendre lisible en une autre localité, selon les conventions d'écriture applicables. Des méthodes de l'objet Date en JavaScript permettent également de récupérer des données, et de modifier des données.

L'utilisation des getters et setters

Les getters et les setters, également appelés accesseurs et mutateurs, sont des méthodes qui ne sont pas spécifiques à l'objet Date, ni au JavaScript : de nombreux langages de programmation l'utilisent. Les getters servent à accéder à des valeurs, les setters servent à changer leur état.

Au moment d'apprendre le JavaScript, il est important de se familiariser avec l'utilisation des getters et des setters, notamment utiles pour manipuler des données de l'objet Date.

Getters

Les getters sont aisément identifiables : ce sont les méthodes JavaScript dont le nom commence par « get », qui se traduit par « récupérer ». La méthode getElementById(), par exemple, permet de récupérer des images JavaScript pour créer un diaporama.

Comme son nom l'indique, un getter récupère une partie de l'objet Date, quand il faut accéder à une donnée déterminée. Parmi les getters fréquemment utilisés avec l'objet Date en JavaScript :

• La méthode getDay() est utilisée pour récupérer la valeur du jour de la semaine, où la valeur 0 correspond au dimanche.
• La méthode getDate() est utile pour accéder à la valeur du jour du mois, entre 1 et 31.
• La méthode getMonth() renseigne le numéro du mois, où 0 correspond au mois de janvier.
• La méthode getFullYear() renvoie la valeur de l'année, au format aaaa. La méthode getYear() renvoie la valeur de l'année au format aa.
• Les méthodes getHours(), getMinutes(), getSeconds() et getMilliseconds() récupèrent respectivement l'heure, les minutes, les secondes et les millisecondes, suivant l'heure locale.
• La méthode getTimezoneOffset() renseigne sur le décalage entre l'heure locale et l'heure GMT, exprimé en nombre de minutes.

Dans l'exemple qui suit, l'objectif est de connaître le jour actuel de la semaine, et le jour de la semaine à la date du 18 octobre 2023.

See the Pen javascript-date_getday by HubSpot France (@HubSpot-France) on CodePen.

Setters

Les setters sont les méthodes JavaScript dont le préfixe est « set », pour « définir » ou « déterminer ». Chaque getter de l'objet Date à son setter correspondant. C'est-à-dire que pour modifier l'heure, par exemple, il faut utiliser la méthode setHours() où l'heure est notée entre parenthèses.

Dans l'exemple qui suit, les setters setHours et setMinutes de l'objet Date sont utilisés pour modifier l'horaire d'un rendez-vous. Le rendez-vous initialement fixé le 18 octobre 2024 à 14h30 est décalé le même jour à 15h00.

See the Pen javascript-date_sethours-setminutes by HubSpot France (@HubSpot-France) on CodePen.

Dans quels cas utiliser l'objet Date en JavaScript ?

Obtenir la date au moment de l'instanciation

Obtenir la date au moment de l'instanciation revient à afficher la date actuelle, au moment où le programme s'exécute. Selon la syntaxe utilisée, l'objet Date en JavaScript permet de faire un affichage au format littéral avec indication du jour et de l'heure, ou en nombre de millisecondes écoulées depuis le 1er janvier 1970.

Pour obtenir la date actuelle sous forme de nombre, il faut utiliser Date.now(). Pour l'afficher sous forme littérale, il faut simplement écrire Date(). Voici un exemple d'utilisation basique de l'objet Date en JavaScript.

See the Pen javascript-date_objet-date by HubSpot France (@HubSpot-France) on CodePen.

Définir la date de son choix

L'objet Date en JavaScript affiche la date et l'heure au moment d'exécuter le programme, mais aussi toute autre date spécifiée. Cela peut être utile pour proposer un programme d'entraînement ou de formation, pour afficher un agenda avec des rendez-vous ou encore pour stocker une liste de dates importantes dans un tableau JavaScript.

Pour créer un objet Date et définir la date de son choix, il faut renseigner cette date entre parenthèses. Les indications relatives à l'année et au mois sont obligatoires. Les informations de jour et d'heure sont facultatives. Voici un exemple simple.

See the Pen javascript-date_new-date by HubSpot France (@HubSpot-France) on CodePen.

Formater une date selon le standard jj/mm/aaaa

Par défaut, la date littérale est affichée selon le standard anglo-saxon. Pour faciliter la lisibilité, en fonction des localités, l'objet Date en JavaScript possède des méthodes de formatage : toLocaleDateString(), toLocaleTimeString() et toLocaleString(). Chacune de ces méthodes accepte une langue de formatage, ainsi que des options pour personnaliser l'affichage.

Pour afficher la date au format jj/mm/aaaa, par exemple, il faut utiliser la syntaxe new Date().toLocaleDateString().

See the Pen javascript-date_format-date-fr-tolocaledatestring by HubSpot France (@HubSpot-France) on CodePen.

Manipuler les options des méthodes de formatage permet d'obtenir d'autres nombreux affichages différents. Illustration :

See the Pen javascript-date_formater-date-perso by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez le CMS de HubSpot.