format date js
JavaScript

Javascript format Date : comment bien formater vos dates?

Nous allons voir dans cet article comment en javascript, vous pouvez format une date facilement. Nous verrons la possibilité avec new Date() mais aussi avec momentJs. A noter que nous ferons un point global sur les timezones (fuseaux horaires) qui sont extrêmement compliqués à gérer.

Petit rappel sur les Dates

Déclaration d’un objet Date

Petit rappel sur les objets Date en Javascript. Nous allons revoir comment créer un objet Date à partir du constructeur de ce dernier :

const currentDate = new Date();
const myDate = new Date('2018-07-22');

J’ai créé deux dates en utilisant le mot clef new et le constructeur Date. Jusque là, tout va bien.

Déclaration avec les timezones (fuseaux horaires)

Quand nous créons un objet Date en JavaScript, il est possible de passer une timezone en paramètre. Nous allons voir ça tout de suite avec un exemple :

const myBirthday = new Date('October 24, 1992 22:15:00 +0700');
const myGfBirthday = new Date('September 14, 1994 12:00:00 (CET)');

Vous pouvez rajouter le nombre d’heures de décalage par rapport à GMT. Dans notre exemple +7 heures, CET correspond au fuseau horaire de référence (qui se situe en Europe centrale). Si vous ne passez aucun paramètre concernant la timezone, il prendra votre date de votre localisation courante.

format date avec l’objet Date

Nous allons à présent en javascript, comment format date avec l’objet Date. Il y a de nombreuses méthodes qui permettent de formater votre Date :

  • toString() : renvoie une chaîne de caractères correspondant à la date
  • toTimeString() : renvoie une chaîne de caractères correspondant à l’heure
  • toUTCString() : renvoie une chaîne de caractères correspondant à la date et l’heure à la timezone de référence (UTC : London)
  • toDateString() : renvoie une chaîne de caractères de la date à un format simplifié
  • toISOString() : renvoie la date au format ISO ce qui peut être utile dans le cas de requete serveur.
  • toLocaleString() : renvoie la date avec le format et la langue de là où vous vous trouvez actuellement
  • toLocaleTimeString() : renvoie l’heure avec le format et la langue de là où vous vous trouvez actuellement
const myBirthday = new Date('October 24, 1992 22:15:00');

myBirthday.toString() // "Sat Oct 24 1992 22:15:00 GMT+0100 (heure normale d’Europe centrale)"
myBirthday.toTimeString() "22:15:00 GMT+0100 (heure normale d’Europe centrale)"
myBirthday.toUTCString() //"Sat, 24 Oct 1992 21:15:00 GMT"
myBirthday.toDateString() //"Sat Oct 24 1992"
myBirthday.toISOString() "1992-10-24T21:15:00.000Z"
myBirthday.toLocaleString() //"24/10/1992 à 22:15:00"
myBirthday.toLocaleTimeString()	//22:15:00

Comme vous pouvez le voir, il y a beaucoup de méthodes différentes pour récupérer une date dans un certain format. Je trouve les méthodes de l’objet Date difficilement utilisables. Je vais vous proposer une alternative pour le moins très connue.

Format date avec momentJs

Je voulais vous présenter momentJs. momentJS est une librairie permettant de gérer des dates en javascript de manière fluide (selon moi). Nous allons voir comment initialiser une date avec momentJS :

import * as moment from 'moment';
import 'moment/locale/pt-br';

console.log(moment.locale()); // en
moment.locale('fr'); // va définir la date courante sous le format français

Je vais maintenant vous présenter quelques méthodes permettant de formatter comme vous le souhaiter votre date avec momentJs :

moment().format();                                // va rendre sous format ISO
moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // va formater sous un format bien détaillé jour, mois année, heure:minute:seconde
moment().format('YYYY MM DD');         // "Format simple 1992 10 24"

Il y a énormément de combinaisons possibles pour faire varier les formats mais aussi les timezones. Je vous renvoie directement vers la documentation pour en savoir plus : https://momentjs.com/docs/#/displaying/ (à noter que c’est tout l’intérêt de moment, de gérer des timezones). Si vous n’avez pas beaucoup de timezones à gérer et que votre application est assez simple, je vous conseille d’utiliser date-fns qui est bien moins lourd (https://date-fns.org/)

Si vous voulez en savoir plus sur la gestion des dates en javascript je ne peux que vous conseiller de lire mon premier article sur le sujet :
http://pierreterrat.com/javascript-date-:-comment-sortir-de-cet-enfer,-simplement?/

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *