[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.
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);
let objectDate = new Date();
console.log(objectDate);
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.
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);
let month = objectDate.getMonth();
console.log(month + 1);
let year = objectDate.getFullYear();
console.log(year);
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);
let format2 = day + '/' + month + '/' + year;
console.log(format2);
let format3 = month + '-' + day + '-' + year;
console.log(format3);
let format4 = day + '-' + month + '-' + year;
console.log(format4);
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);
let format2 = `${day}/${month}/${year}`;
console.log(format2);
let format3 = `${month}-${day}-${year}`;
console.log(format3);
let format4 = `${day}-${month}-${year}`;
console.log(format4);
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);
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);
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);
let dateFormat2 = moment().format('D/MM/YYYY');
console.log(dateFormat2);
let dateFormat3 = moment().format('MM-D-YYYY');
console.log(dateFormat3);
let dateFormat4 = moment().format('MM/D/YYYY');
console.log(dateFormat4);
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 !