Comment formater une date en JavaScript ?

Vous vous battez pour obtenir leb bon format avec avec des dates en JavaScript ? Vous voulez transformer un type de donnée en une date ?

Dans votre parcours de développeur JavaScript, vous serez, d’une manière ou d’un autre, confronté au format de date.

Pour formater une date JavaScript dans le format de date standard francais jj/mm/aaaa, on utilise la méthode toLocaleDateString() appliquée à un objet Date. Ainsi, new Date().toLocaleDateString() retournera la date d’aujourd’hui dans le format jj/mm/aaaa.

Certaines dates seront des strings, d’autres des timestamps, d’autres des formats de date que vous ne connaissez pas forcement.

Il existe plusieurs manières de manipuler et formater des dates en JS :

• utiliser les méthodes des l’objet JavaScript Date
• des bibliothèques node.js comme moment.js ou dateformat
• coder vos propres fonctions pour afficher les dates

Découvrons sans plus tarder comment formater des dates en JavaScript !

Le format de date dd/mm/yyyy en JavaScript

Le format jj/mm/aaaa est le format de date en français. La manière pour l’obtenir dans JavaScript, est d’utiliser la méthode native toLocaleDateString qu’on applique sur l’objet Date.

Avec du code, cela donne :

const maDate = new Date()

maDate.toLocaleDateString("fr") // 20/10/2021

C’est la méthode la plus simple pour avoir une date sous le format jour/mois/année en JavaScript, en une ligne ça donne new Date().toLocaleDateString("fr").

Évidemment on peut formater les objets de type Date de plein d’autres manières.

Peut-être que vous partez d’une chaîne de caractère ou d’un timestamp.

Voyons ensemble les cas plus complexes quand on veut manipuler les dates en JS.

L’objet Date en JavaScript

La constructeur de l’objet Date prend en paramètre de nombreux éléments.

new Date() // crée un objet Date avec le temps au moment de l'instanciation
new Date(timestamp) // prend un nombre "timestamp"
new Date(string) // prend une string parsable comme Date.parse()

new Date(année, indexDuMois) // l'indexDuMois commence à 0, Mars est 2, Mai 4
new Date(année, indexDuMois, jour)
new Date(année, indexDuMois, jour, heure)
new Date(année, indexDuMois, jour, heure, minute)
new Date(année, indexDuMois, jour, heure, minute, secondes)
new Date(année, indexDuMois, jour, heure, minute, secondes, millisecondes)

toDateString() en JavaScript

La méthode toDateString() retourne une chaîne de caractères qui contient, en anglais :

• Le jour en 3 lettres
• Le mois en 3 lettres
• Le jour du mois en 2 chiffres
• L’année en 4 chiffres

Par exemple, avec la date d’aujourd’hui :

const maDate = new Date()

maDate.toDateString() // 'Wed Oct 20 2021'

toUTCString() en JavaScript

La méthode toUTCString() retourne une chaîne de caractères similaire à toDateString() mais avec l’heure et le fuseau horaire :

const maDate = new Date()

maDate.toUTCString() // 'Wed, 20 Oct 2021 12:50:02 GMT'

Transformer un timestamp en date JavaScript

Un timestamp est une unité de temps propre aux systèmes informatiques comme UNIX. Si vous devez formater un timestamp en une date en JavaScript, vous pouvez créer un objet Date à partir d’un timestamp.

Si c’est un timestamp UNIX à 10 chiffres que vous utilisez, vous devrez multiplier la valeur du timestamp par 1000. Les timestamps de JavaScript prenant en compte les millisecondes, contrairement aux timestamps UNIX qui s’arrêtent aux secondes, il faut fournir les 4 derniers chiffres additionnels.

const timestamp = new Date(1634726212 * 1000)

En utilisant de nouveau la méthode toLocaleDateString, vous pouvez afficher votre date au format jj/mm/aaaa.

maDate.toLocaleDateString("fr") // 20/10/2021

Transformer une string en date JavaScript

Comme nous l’avons vu, le constructeur de l’objet Date en JavaScript prend également en paramètre une chaîne de caractères.

new Date(string) // prend une string parsable comme Date.parse()

💡 Cependant, cette manière d’instancier une date est fortement déconseillée car le résultat depend du navigateur internet de la personne qui execute le code JavaScript.

Une meilleure solution est d’utiliser moment.js qui a une méthode d’instanciation de date bien plus fiable.

Qu’est-ce qu’est moment.js ?

moment.js est un package node.js qui a pour but de simplifier, rendre plus fiable et plus facile d’utilisation l’utilisation de dates en JavaScript. Moment.js permet de parser, valider, manipuler et afficher des dates et temps dans votre code JS.

Comment installer moment.js ?

Comme les autres packages node, on peut installer moment.js avec npm, yarn, ou un autre manager de packets node.

npm install moment --save   # avec npm
yarn add moment             # avec Yarn

Timestamp vers objet de date javascript avec moment.js

Une autre solution est d’utiliser la bibliothèque moment.js. Avec, la fonction unix prend votre timestamp UNIX au bon format, sans que vous deviez le multiplier par 1000.

import moment from "moment"

const timestamp = moment.unix(1634726212)

Pour l’afficher dans le format que vous voulez, il ne vous reste plus qu’à appliquer la méthode format sur votre objet timestamp.

timestamp.format("dd/mm/yy") // 11:36:52

Qu’est-ce qu’est dateformat ?

Vous n’êtes pas le seul à trouver l’objet date en JavaScript particulièrement complex. D’autres avant vous, et dans les versions moins avancées de JavaScript. Steven Levithan est donc venu avec une bibliothèque JavaScript pour se faciliter la vie.

Avec le temps, d’autres développeurs ont repris le projet et l’ont porté sur node.js.

Pour l’installer, avec npm :

npm install dateformat

Timestamp vers objet de date javascript avec dateformat

dateformat est une autre bibliothèque JavaScript qui permet de manipuler et formater des objets de type Date en JavaScript dans le format que vous souhaitez.

import dateFormat from "dateformat"

const maintenant = new Date()
dateFormat(maintenant, "dd/mm/yyyy")

Comment formatez-vous les dates en JavaScript ?

Et voilà, vous savez maintenant comment changer le format de dates en JS et ce quel que soit leur forme initiale.

Les dates font parties d’une longue série d’API, méthodes et astuces qui rendront votre pratique du JavaScript nettement plus simple. Maîtriser tous ces concepts vous feront gagner énormément de temps.

Investir dans vos connaissances en JavaScript, comme dans la formation 20 Projets en JavaScript, peut donc s’avérer être très rentable sur le long terme.

Vous trouverez aussi plus de cours en JavaScript et des livres en JavaScript en plus de tous les articles de ce blog qui parlent de JavaScript.