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 ?
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 :
- les conventions
- les normes linguistiques
- culturelles
- 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