De nombreuses applications que vous créez auront une sorte de composant de date, qu'il s'agisse de la date de création d'une ressource ou de l'horodatage d'une activité.
Traiter le formatage de la date et de l'horodatage peut être épuisant. Dans ce guide, vous apprendrez comment obtenir la date actuelle dans différents formats en JavaScript.
Objet Date de JavaScript
JavaScript a un Dateobjet intégré qui stocke la date et l'heure et fournit des méthodes pour les gérer.
Pour créer une nouvelle instance de l' Dateobjet, utilisez le newmot - clé:
const date = new Date();L' Dateobjet contient un Numberqui représente les millisecondes écoulées depuis l'Époque, soit le 1er janvier 1970.
Vous pouvez transmettre une chaîne de date au Dateconstructeur pour créer un objet pour la date spécifiée:
const date = new Date('Jul 12 2011');Pour obtenir l'année en cours, utilisez la getFullYear()méthode d'instance de l' Dateobjet. La getFullYear()méthode renvoie l'année de la date spécifiée dans le Dateconstructeur:
const currentYear = date.getFullYear(); console.log(currentYear); //2020De même, il existe des méthodes pour obtenir le jour du mois en cours et le mois en cours:
const today = date.getDate(); const currentMonth = date.getMonth() + 1; La getDate()méthode renvoie le jour en cours du mois (1-31).
La getMonth()méthode renvoie le mois de la date spécifiée. Un point à noter à propos de la getMonth()méthode est qu'elle renvoie des valeurs indexées 0 (0-11) où 0 est pour janvier et 11 pour décembre. D'où l'ajout de 1 pour normaliser la valeur du mois.
Date maintenant
now()est une méthode statique de l' Dateobjet. Il renvoie la valeur en millisecondes qui représente le temps écoulé depuis l'Epoch. Vous pouvez passer les millisecondes renvoyées par la now()méthode au Dateconstructeur pour instancier un nouvel Dateobjet:
const timeElapsed = Date.now(); const today = new Date(timeElapsed);Formatage de la date
Vous pouvez mettre en forme la date dans plusieurs formats (GMT, ISO, etc.) à l'aide des méthodes de l' Dateobjet.
La toDateString()méthode renvoie la date dans un format lisible par l'homme:
today.toDateString(); // "Sun Jun 14 2020"La toISOString()méthode renvoie la date qui suit le format étendu ISO 8601:
today.toISOString(); // "2020-06-13T18:30:00.000Z"La toUTCString()méthode renvoie la date au format de fuseau horaire UTC:
today.toUTCString(); // "Sat, 13 Jun 2020 18:30:00 GMT"La toLocaleDateString()méthode renvoie la date dans un format sensible à la localité:
today.toLocaleDateString(); // "6/14/2020"Vous pouvez trouver la référence complète des Dateméthodes dans la documentation MDN.
Fonction de formatage de date personnalisée
Outre les formats mentionnés dans la section ci-dessus, votre application peut avoir un format de données différent. Cela peut être au format yy/dd/mmou au yyyy-dd-mmformat, ou quelque chose de similaire.
Pour résoudre ce problème, il serait préférable de créer une fonction réutilisable afin qu'elle puisse être utilisée dans plusieurs projets.
Donc, dans cette section, créons une fonction utilitaire qui renverra la date au format spécifié dans l'argument de la fonction:
const today = new Date(); function formatDate(date, format) { // } formatDate(today, 'mm/dd/yy');Vous devez remplacer les chaînes "mm", "dd", "yy" par les valeurs respectives du mois, du jour et de l'année de la chaîne de format transmise dans l'argument.
Pour ce faire, vous pouvez utiliser la replace()méthode ci-dessous:
format.replace('mm', date.getMonth() + 1);Mais cela conduira à beaucoup de chaînage de méthodes et rendra difficile la maintenance lorsque vous essayez de rendre la fonction plus flexible:
format.replace('mm', date.getMonth() + 1) .replace('yy', date.getFullYear()) .replace('dd', date.getDate());Au lieu de chaîner des méthodes, vous pouvez utiliser une expression régulière avec la replace()méthode.
Créez d'abord un objet qui représentera une paire clé-valeur de la sous-chaîne et sa valeur respective:
const formatMap = { mm: date.getMonth() + 1, dd: date.getDate(), yy: date.getFullYear().toString().slice(-2), yyyy: date.getFullYear() };Ensuite, utilisez une expression régulière pour faire correspondre et remplacer les chaînes:
formattedDate = format.replace(/mm|dd|yy|yyy/gi, matched => map[matched]);La fonction complète ressemble à ceci:
function formatDate(date, format) { const map = { mm: date.getMonth() + 1, dd: date.getDate(), yy: date.getFullYear().toString().slice(-2), yyyy: date.getFullYear() } return format.replace(/mm|dd|yy|yyy/gi, matched => map[matched]) }Vous pouvez également ajouter la possibilité de formater les horodatages dans la fonction.
Conclusion
J'espère que vous avez maintenant une meilleure compréhension de l' Dateobjet en JavaScript. Vous pouvez également utiliser d'autres bibliothèques tierces comme datesjet momentpour gérer les dates dans votre application.
Jusqu'à la prochaine fois, restez en sécurité et continuez à bousculer.