javascript date
JavaScript

Javascript Date : comment sortir de cet enfer, simplement?

La gestion de date en JavaScript est pour le moins compliquée. Je dirais même que c’est un véritable enfer. Nous allons voir dans cet article, comment fonctionne l’objet Date en javascript. Nous allons également voir l’alternative pour s’en sortir tout de même.

javascript date : Création de l’objet

Il y a un objet Date en javascript. Il a été ajouté il n’y a pas si longtemps que ça au final. Au début du JavaScript les dates étaient vraiment ingérables. Vu qu’un exemple vaut mieux qu’un long discours, voyons ce qui suit :

var date1 = new Date();
var date2 = new Date('October 24, 1992 22:15:00');

J’ai dans mon exemple, créé deux variables : date1 et date2. J’ai utilisé le mot clef new pour créer un nouvel objet en javascript puis j’ai utilisé le constructor Date.

Date1 contient un objet Date initialisé sans propriétés. Il contient donc par défault la Date du jour. Date2 contient quand a elle un objet Date mais initialisé à la date du 24/10/1992 à 22:15. Vous pouvez bien sûr mettre une autre date selon votre convenance.

Méthodes liées à l’objet de type Date

Nous allons à présent voir les différentes méthodes liées à l’objet Date.

Les getters

Nous allons commencer par les méthodes getter. Ces méthodes permettent de récupérer toutes sortes d’informations sur vos objets Date :

  • getDate() : permet de récupérer le jour du mois (1-31)
  • getFullYear(): permet de récupérer l’année
  • getHours(): permet de récupérer l’heure
  • getMilliseconds(): permet de récupérer les millisecondes
  • getMinutes(): permet de récupérer les minutes
  • getSeconds(): permet de récupérer les secondes

Reprenons notre exemple plus haut et essayons ensemble ces méthodes :

var date1 = new Date();
var date2 = new Date('October 24, 1992 22:15:00');
console.log(date2.getDate()); //24
console.log(date2.getFullYear()); //1992
console.log(date2.getHours()); //22
console.log(date2.getMilliseconds()); //0
console.log(date2.getMinutes()); //15
console.log(date2.getSeconds()); // 0

Il y a plein d’autres méthodes getters mais je ne les détaillerai pas dans cet article, tout simplement parce que je déteste l’objet Date (comme beaucoup) et je préfère largement utiliser momentJs.

Les setters

Comme souvent, quand il y a des getters, il y a des setters. Il se ressemble beaucoup, les méthodes setters permettent de modifier les propriétés de notre objet Date.

  • setDate() : permet de modifier le jour du mois (1-31)
  • setFullYear(): permet de modifier l’année
  • setHours(): permet de modifier l’heure
  • setMilliseconds(): permet de modifier les millisecondes
  • setMinutes(): permet de modifier les minutes
  • setSeconds(): permet de modifier les secondes

Il est absolument possible de tout modifier dans l’objet Date en javascript :

var date1 = new Date();
var date2 = new Date('October 24, 1992 22:15:00');
date2.setDate("22"); //24 => 22
date2.setFullYear("1997"); //1992 => 1997
date2.setHours("13"); //22 =>13
console.log(date2); // Wed Oct 22 1997 13:15:00 GMT+0200 (heure d’été d’Europe centrale)

MomentJs

Bon passons aux choses sérieuses. Nous allons parler de MomentJS. En faire une introduction en tout cas.

Tant que vous utilisez des dates localement, vous pouvez utiliser l’objet Date en javascript. Tout se passe à peu près bien. Dés que vous voulez faire des choses un peu plus compliqués du style :

  • Calculer le temps entre deux dates
  • Changer de TimeZone (fuseau horaire)
  • Retirer un nombre de jours

MomentJs vous permet de faire toutes ces opérations beaucoup plus facilement (selon moi). Le format de Date est aussi beaucoup mieux gérée. Je ferais un article entièrement consacré à momentJs pour la gestion du format de Date.

Les aspects négatifs de momentJs

Je tiens à rajouter ce titre, suite à de très bonne remarques. momentJs a ces défauts. Je tiens à vous mettre ce lien qui a été noté par Ellin en commentaire et qui illustre bien les défauts de momentJs : https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js

Si vous voulez aller plus loin dans votre apprentissage en javascript, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/javascript-:-le-guide-ultime-pour-bien-commencer-a-apprendre/

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.

2 commentaires

  • Ellinn

    Hello Pierre,

    Je pense qu’il est très important de préciser certains points concernant MomentJS, si je peux me permettre de lier un article pour soutenir mes propos, je pense que celui-ci est plutôt complet https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js
    Si c’est mal venu, n’hésite pas à supprimer mon commentaire et on peut en discuter d’une autre façon.

    Le titre est bien sur exagéré, je ne pense pas que c’est une mauvaise librairie. Je pense juste qu’il est important d’afficher les aspects moins positifs.

    En toute bonne volonté,
    Adrien.

    • pterrat

      Bonjour Ellinn, merci pour ce commentaire constructif. Je sais que beaucoup ne seront pas d’accord avec moi sur cet article. Je trouve ça intéressant d’avoir un commentaire précisant les avis contre momentJs. C’est vraiment intéressant et je vais rajouter ton lien dans l’article pour faire apparaître les deux avis

Laisser un commentaire

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