Comment formater une date en JavaScript ?

Dans cet article, nous découvrirons les différentes manières de formater un objet Date en différentes chaînes de date de différents formats à l'aide de JavaScript.

Nous verrons les méthodes de formatage des objets Date en différentes chaînes de date avec différents formats à l'aide de JavaScript. Que vous construisiez une application Web, manipuliez des données ou affichiez simplement des dates, la maîtrise de ces techniques vous permettra de présenter les dates dans le format qui correspond le mieux à vos besoins. Explorons la polyvalence du formatage de date en JavaScript.

La liste ci-dessous contient les différentes manières de formater la date en JavaScript :

Table des matières

Méthode 1 : Utilisation de la méthode toDateString()

Le Méthode toDateString() formate l'objet date dans un format lisible par l'homme comme Jour Mois Date Année.

Syntaxe:

dateObj.toDateString(); 

Exemple: L'exemple de code ci-dessous explique l'utilisation de la méthode toDateString() pour formater la date.

Javascript
const currentDate = new Date(); const formattedDate = currentDate.toDateString(); console.log(formattedDate); 

Sortir
Fri Dec 29 2023 

Méthode 2 : Utilisation de la méthode toISOString()

Le Méthode toISOString() formatera les données selon les normes internationales suivant le format ISO 8601.

Syntaxe:

dateObj.toISOString(); 

Exemple: L'exemple de code ci-dessous implémente la méthode toISOString() pour formater l'objet date.

Javascript
const currentDate = new Date(); const formattedDate = currentDate.toISOString(); console.log(formattedDate); 

Sortir
2023-12-29T09:39:27.634Z 

Méthode 3 : Utilisation de la méthode toLocaleDateString()

Méthode toLocaleDateString() formatera la partie date de l'objet date dans le même format que celui acquis par votre système ou dans le format spécifié.

Syntaxe:

dateObj.toLocaleDateString();

Exemple: L'exemple de code ci-dessous convertit la date au format acquis par votre système.

Javascript
const currentDate = new Date(); const formattedLocalDate = currentDate.toLocaleDateString(); const formattedInSpecifiedFormat = currentDate.toLocaleDateString("hi-IN"); console.log(formattedLocalDate); console.log(formattedInSpecifiedFormat); 

Sortir
12/29/2023 29/12/2023 

Méthode 4 : Utilisation de la méthode toLocaleString()

Méthode toLocaleString() fonctionnera de la même manière que toLocaleDateString(). La seule différence est qu'il renvoie également l'heure avec la chaîne formatée.

Syntaxe:

dateObj.toLocaleString();

Exemple: L'exemple ci-dessous utilise la méthode toLocaleString() pour formater la date.

Javascript
const currentDate = new Date(); const formattedLocalDate = currentDate.toLocaleString(); const formattedInSpecifiedFormat = currentDate.toLocaleString("hi-IN"); console.log(formattedLocalDate); console.log(formattedInSpecifiedFormat); 

Sortir
12/29/2023, 9:39:27 AM 29/12/2023, 9:39:27 am 

Méthode 5 : Utilisation de la méthode objet Intl.DateTimeFormat()

Méthode objet Intl.DateTimeFormat() est une méthode objet puissante pour formater l’objet date. Il formate la date dans le format spécifié et avec les options spécifiées pour formater la date et l'heure.

Syntaxe:

const formatObj = new Intl.DateTimeFormat('en-US'); formatObj.format(dateObj); 

Exemple: L'exemple ci-dessous formate l'objet date à l'aide de la méthode objet intl.DateTimeFormat().

Javascript
const currentDate = new Date(); const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {dateStyle: 'long'}); const formattedDate = dateTimeFormatter.format(currentDate); console.log(formattedDate); 

Sortir
December 29, 2023 

Méthode 6 : formater manuellement la date à l’aide des méthodes Date

Dans cette approche, nous utiliserons les différentes méthodes de date pour obtenir le jour, la date, le mois et l'année de l'objet date, puis les concatérons pour former une chaîne de date formatée.

Exemple: L'exemple de code ci-dessous utilise les différentes méthodes de date pour obtenir la date et la formater.

Javascript
const weekDays =  ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const monthsArr =  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const currentDateObj = new Date(); const currentDay = weekDays[currentDateObj.getDay()]; const currentDate = currentDateObj.getDate(); const currentMonth = monthsArr[currentDateObj.getMonth()]; const currentYear = currentDateObj.getFullYear(); console.log(`${currentDay} ${currentDate} ${currentMonth}, ${currentYear}`); 

Sortir
Fri 29 Dec, 2023