Gérer les dates au moment de traiter des fuseaux horaires se révèle être une tâche ardue.

Heureusement, il y a plusieurs bibliothèques comme moment.js qui permettent de gérer des problèmes communs : la manipulation et le formatage de la date, les fuseaux horaires ou encore l’heure d’été.

En effet, on rencontre souvent des difficultés liées à l’affichage des dates dans le format correct et le fuseau horaire.

Généralement, on a un serveur qui envoie l’heure locale sous le format d’un fuseau horaire et de chaîne. Afin de les manipuler correctement et les afficher, il est nécessaire de les analyser pour ensuite pouvoir les stocker.

Ce guide a été conçu spécialement pour donner des informations sur la gestion des difficultés habituelles avec la célèbre bibliothèque moment.js, qui n’est autre qu’une alternative à la date.js.

Moment Js : c’est quoi réellement ?

Source image : pixabay

Moment js est une bibliothèque :

  • très complète
  • populaire

pour une meilleure gestion des dates. Elle est également perçue comme la norme dans le domaine du javascript.

Elle dispose des fonctions pour :

  • analyser
  • manipuler
  • afficher les dates et les heures

Certains outils comme moment-timezone.js ajoutent des fonctions supplémentaires  permettant une gestion optimisée des dates heures et ce, dans différents pays.

Par ailleurs, les dates de cette bibliothèque sont mutables. Nous allons aborder ce sujet un peu plus en bas, ainsi, ne vous inquiétez pas !

On va donc faire la lumière sur :

  • l’explication du déroulement du traitement de la date avec une application JS complète.
  • les points critiques de moments

Moment.js : le fuseau horaire

Alors, commençons par définir ce qu’est réellement un fuseau horaire ?

Le fuseau horaire est une immense région du globe qui étudie un temps standard cohérent inversé par rapport aux coordonnées universelles ou UTC.

Un fuseau horaire:

  • règle l’heure  selon la distance du méridien principal
  • change de décalage au cours d’une année, l’heure d’été ou DST

Moment.js : des conseils pour stocker une date

Il existe plusieurs manières de stocker une date avec moment js :

Analyser la chaîne de date

Au moment de recevoir une chaîne de date, il faut :

  • l’analyser afin de recevoir le Datetime correct
  • stocker dans la base de données

Selon le format

En effet, la bibliothèque moment :

  • fournit une fonction moment (date : string, format : string)
  • permet par la suite de convertir une chaîne en un objet moment selon le format

const moment = require('moment')

const dateToStore = '2018-02-06 13:35'

const momentDate = moment(dateToStore,'YYYY-MM-DD HH:mm')

// momentObject(2018-02-06T13:35:00+01:00)

Selon le fuseau horaire

La bibliothèque moment js analyse la date avec l’heure locale de l’appareil, que ce soit pour :

  • l’utilisateur
  • le serveur

On obtient donc l’utcOffset local en minutes en faisant moment.utcOffset (). Donc, on a observé qu’il faut :

  • indiquer le fuseau horaire pour avoir une date bien analysée
  • le spécifier en se basant sur moment-timezone et non moment

const moment = require('moment')

const momentTz = require('moment-timezone')

const dateToStore = '2018-02-06 13:35'

moment().utcOffset(); // 60 minutes

const timeZone = 'Indian/Reunion' // 'UTC+04:00'

const momentDate = moment(dateToStore,'YYYY-MM-DD HH:mm')

//momentObject(2018-02-06T13:35:00+01:00)

const momentDateTz = momentTz.tz(dateToStore,'YYYY-MM-DD HH:mm',timeZone)

//momentObject(2018-02-06T13:35:00+04:00)

Le bon exemple

Ainsi, l’API externe envoie :

  • la date sans le fuseau horaire
  • pas en UTC

La meilleure option consiste à :

  • donner la date en UTC
  • au moins envoyer la date avec le décalage d’UTC

De cette manière, le récepteur ne sera pas obligé de gérer le fuseau horaire.

Dans les meilleurs cas, il est possible d’approfondir plus sur la chaîne de date en effectuant :

  • moment.utc ( )
  • moment.parseZone( )
  • moment (date, ‘’YYYY-MM-DD HH :mm : ssZZ’)

const moment = require('moment')

const receveidDateInUTC= '2018-02-06 9:35:00+00:00'

const receveidDateWithTimeZone = '2018-02-06 13:35:00+04:00'

moment(receveidDateInUTC,'YYYY-MM-DD HH:mm:ssZZ')

// momentObject(2018-02-06T10:35:00+01:00)

moment.utc(receveidDateInUTC,'YYYY-MM-DD HH:mm:ssZZ')

// momentObject(2018-02-06T9:35:00+00:00)

moment(receveidDateWithTimeZone,'YYYY-MM-DD HH:mm:ssZZ')

// momentObject(2018-02-06T10:35:00+01:00)

moment.parseZone(receveidDateWithTimeZone,'YYYY-MM-DD HH:mm:ssZZ')

// momentObject(2018-02-06T13:35:00+04:00)

Bref, on peut analyser une date de plusieurs manières. C’est la raison pour laquelle il est conseillé de conserver et d’envoyer la date en UTC.

Moment js : usage des coordonnées de temps universel

Pour convertir les données en quelque chose de mobile, il est recommandé de stocker le datetime en UTC. Il s’agit de la norme de temps internationale exprimant :

  • des dates sans décalage
  • ne s’ajoutent pas à l’heure d’été.

Il est aussi d’usage de choisir la fonction moment.utc ( ) qui transforme un objet moment en UTC.

const momentTz = require('moment-timezone')

const dateToStore = '2018-02-06 13:35'

const timeZone = 'Indian/Reunion' // 'UTC+04:00'

const momentDateTz = momentTz.tz(dateToStore,'YYYY-MM-DD HH:mm',timeZone)

// momentObject(2018-02-06T13:35:00+04:00)

const momentDateTzUTC = momentTz.tz(dateToStore,'YYYY-MM-DD HH:mm',timeZone).utc()

// momentObject(2018-02-06T9:35:00+00:00)

En définitive, on peut très bien stocker la date comme un attribut TIMESTAMP_WITH_TIMEZONE sur la base de données.

Afficher une date avec moment js

Pour afficher une date, plusieurs possibilités s’offrent à vous.

Régler l’heure locale

Certaines applications fournissent une fonction permettant de formater les dates. Ce qui permet de recevoir la date du back-end en UTC. Toutefois, en fonction de la localisation de la personne, les locales sont différentes. Les locales comportent  des informations sur :

  1. les conventions
  2. les normes linguistiques
  3. culturelles
  4. technologiques

C’est ce qui fait qu’il est primordial de régler l’heure locale.

Mettre en forme la date en js

Pour finir, il est important de concevoir une fonction pour tous les formats que vous avez choisis.

const plainTextDateTime = dateTime => {

return moment(dateTime).format('DD MMMM HH:mm') // 06 Février 13:35

}

const getDate = dateTime => {

return moment(dateTime).format('DD MMMM') // 06 Février

}

const getTime = dateTime => {

return moment(dateTime).format('HH:mm') // 13:35

Comment manipuler la date en javascript ?

Moment dispose d’un noyau de fonctions de maniement :

  • fonction de comparaison
  • fonction d’addition
  • fonction de soustraction

Les fonctions sont très faciles d’usage. Le seul problème réside sur le fait que les objets moments sont tout à fait convertibles.

à titre d’exemple,  pour savoir que la date est moins d’une heure, deux options sont possibles :

//option 1

const myDate = moment('2018-02-06 13:35:00+00:00','YYYY-MM-DD HH:mm:ssZZ');

if (myDate.isBefore(moment().add(1,'hour'))) {

// myDate is less than one hour

}

//option 2

const now = moment();

const myDate = moment('2018-02-06 9:35:00+00:00','YYYY-MM-DD HH:mm:ssZZ');

if (myDate.subtract(1,'hour').isBefore(now)) {

// myDate is less than one hour

}

console.log(myDate.format())

// myDate has been muted => 2018-02-06T08:35:00+00:00

Avec l’option 1, il faut ajouter à moment () une heure. Cela ne devrait pas engendrer un problème, car on ne garde pas la valeur en mémoire.  Cependant avec l’option 2, la valeur de myDate peut changer, ce qui n’est pas tout à fait à l’image de votre attente. Il est donc recommandé de ne manipuler la valeur qu’une fois que celle de myDate est clonée. 

//option 2

const myDate = moment('2018-02-06 9:35:00+00:00','YYYY-MM-DD HH:mm:ssZZ');

if (myDate.clone().subtract(1,'hour').isBefore(moment())) {

// myDate is less than one hour

}

console.log(myDate.format())

// myDate has NOT been muted => 2018-02-06T09:30:00+00:00

Conclusion

Compte tenu de ce qui a été vu précédemment, sachez qu’une date peut avoir 4 états pour les mêmes données :

  • L’état obtenu sous forme de chaîne : permet d’analyser la date afin d’obtenir l’objet moment correct
  • L’état de stockage : permet de déposer les données en UTC ou encore avec le fuseau horaire
  • l’état de manipulation : permet d’utiliser les dates avec l’objet date. Lors de l’usage d’un moment, il faut d’abord cloner l’objet avant de le manipuler
  • L’état d’affichage : permets de définir l’heure locale et de créer un service assurant la gestion des différentes représentations dans votre application.

Source image à la une : pixabay