Quel est le format d'une date en Javascript ?

Les formats en javascript d'une date sont généralement : Dates Only — YYYY-MM-DD. Dates With Times — YYYY-MM-DDTHH:MM:SSZ.

Javascript Date Format - Comment formater une date ?

[object Promise] est l'une des trois technologies web fondamentales que vous utiliserez lors du développement de sites ou d'applications web.

Lors de la création de ces pages Web, vous aurez probablement besoin, à un moment ou à un autre, d'utiliser des dates pour une raison ou une autre, par exemple pour afficher la date à laquelle un élément a été téléchargé, stocké, etc.

Dans cet article, vous apprendrez à formater des dates en JavaScript et verrez comment vous pouvez le faire avec une bibliothèque de dates JavaScript populaire connue sous le nom de moment.js.

Comment gérer les dates en JavaScript ?

En JavaScript, et quand vous êtes développeur react freelance, vous utilisez soit avec new Date() soit le constructeur Date() pour obtenir vos dates (soit la date actuelle, soit une date spécifique).

Le constructeur new Date() renvoie un nouvel objet Date, tandis que le constructeur Date() renvoie une représentation en chaîne de la date et de l'heure actuelles.

let stringDate = Date();
console.log(stringDate); // "Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)"

let objectDate = new Date();
console.log(objectDate); // Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)

Ces dates au format complet comprennent le jour, le mois, l'année, la minute, l'heure et d'autres informations dont vous n'avez pas toujours besoin.

Votre principale préoccupation est de voir comment vous pouvez formater ces valeurs de date pour renvoyer des dates dans des formats lisibles, que vous pouvez intégrer à votre page Web pour que tout le monde puisse les comprendre.

Comment formater des dates en Javascript ?

Le formatage des dates dépend de vous et de vos besoins. Dans certains pays, le mois vient avant le jour, puis l'année (22/06/2022). Dans d'autres, le jour précède le mois, puis l'année (22/06/2022), et bien d'autres encore.

Quel que soit le format, vous souhaitez décomposer la valeur de l'objet date et obtenir les informations nécessaires à votre page Web.

C'est possible grâce aux méthodes de date JavaScript. Il existe un grand nombre de ces méthodes, mais comme cet article ne concerne que les dates, vous n'aurez besoin que de trois d'entre elles :

getFullYear() - Vous utiliserez cette méthode pour obtenir l'année sous la forme d'un nombre à quatre chiffres (yyyy). Par exemple, 2022.
getMonth() - Vous utiliserez cette méthode pour obtenir le mois sous la forme d'un nombre compris entre 0 et 11, chaque nombre représentant les mois de janvier à décembre. Par exemple, 2 sera l'indice pour le mois de mars puisqu'il s'agit d'une indexation basée sur le zéro (ce qui signifie qu'elle commence à partir de 0).
getDate() - Vous utiliserez cette méthode pour obtenir le jour sous la forme d'un nombre compris entre 1 et 31 (il ne s'agit pas d'un index, mais de la valeur exacte du jour, qui commence donc à 1 et non à 0).

Note : Ces méthodes ne peuvent être appliquées ou ne fonctionneront qu'avec le nouveau constructeur Date(), qui renvoie un objet date.

let objectDate = new Date();

let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

Vous remarquerez que 1 est ajouté à la valeur du mois ci-dessus. C'est parce que le mois est indexé sur 0. La valeur commence à partir de 0. Cela signifie que 7 signifiera août au lieu de 8.

À ce stade, vous avez réussi à extraire toutes les valeurs de date de l'objet date. Vous pouvez maintenant les organiser dans le format que vous souhaitez :

let format1 = month + '/' + day + '/' + year;
console.log(format1); // 7/23/2022

let format2 = day + '/' + month + '/' + year;
console.log(format2); // 23/7/2022

let format3 = month + '-' + day + '-' + year;
console.log(format3); // 7-23-2022

let format4 = day + '-' + month + '-' + year;
console.log(format4); // 23-7-2022

Dans l'exemple ci-dessus, vous avez concaténé les valeurs à l'aide de l'opérateur plus. Vous pouvez également utiliser des littéraux de modèle pour concaténer :

let format1 = `${month}/${day}/${year}`;
console.log(format1); // 7/23/2022

let format2 = `${day}/${month}/${year}`;
console.log(format2); // 23/7/2022

let format3 = `${month}-${day}-${year}`;
console.log(format3); // 7-23-2022

let format4 = `${day}-${month}-${year}`;
console.log(format4); // 23-7-2022

Maintenant, vous avez vu les différentes façons de formater votre date.

Vous pouvez également souhaiter que les valeurs du mois et du jour soient précédées de 0 s'il s'agit d'une valeur numérique unique (de 1 à 9). Pour ce faire, vous devez ajouter une condition pour gérer cette situation avant de formater vos dates :

if (day < 10) {
  day = '0' + day;
}

if (month < 10) {
  month = `0${month}`;
}

let format1 = `${month}/${day}/${year}`;
console.log(format1); // 07/23/2022

Comment formater les dates avec Moment.js ?

Moment.js est une bibliothèque JavaScript de date et d'heure que vous pouvez utiliser pour formater rapidement vos dates sans avoir à gérer la logique avec autant de lignes de code.

Pour utiliser cette bibliothèque, vous devez installer le paquet dans votre projet en utilisant l'une des options préférées dans la documentation.

Dans ce guide, nous nous intéressons uniquement à la façon dont vous pouvez formater les dates avec Moment.js :

let date = moment().format();

console.log(date); // 2022-08-23T16:50:22-07:00

Pour formater cette valeur de date et d'heure, il vous suffit d'entrer le format que vous préférez et vous obtiendrez la date formatée comme indiqué ci-dessous :

let dateFormat1 = moment().format('D-MM-YYYY');
console.log(dateFormat1); // 23-08-2022

let dateFormat2 = moment().format('D/MM/YYYY');
console.log(dateFormat2); // 23/08/2022

let dateFormat3 = moment().format('MM-D-YYYY');
console.log(dateFormat3); // 08-23-2022

let dateFormat4 = moment().format('MM/D/YYYY');
console.log(dateFormat4); // 08/23/2022

Conclusion

Cet article vous a appris à formater des dates en JavaScript, que ce soit à partir de zéro ou avec la bibliothèque moment.js.

Soyez vigilant lorsque vous utilisez une bibliothèque pour de petits projets, car les bibliothèques augmentent la taille de votre projet. Cela est dû au fait que ces bibliothèques sont conçues pour gérer beaucoup plus d'opérations. Mais pour utiliser une opération minimale, vous devez toujours installer la bibliothèque entière.

Il est toujours recommandé d'effectuer des opérations simples comme celle-ci à partir de zéro. C'est-à-dire, à moins que vous ne soyez obligé d'utiliser la bibliothèque, que la bibliothèque ait été installée, ou que vous travailliez sur un projet à grande échelle qui nécessite un formatage complexe.

Bon code !