Blogdevphp

Moment.js : Bibliothèque javascript pour la gestion des dates

2014-03-01 jquery

Cette bibliothèque, va vous permettre, de gérer les dates, de les parser, manipuler, valider...

MomentJs est une bibliothèque très complète, avec plusieurs fonctions interessantes.

Nous allons voir, à travers, quelques exemples, comment l'utiliser.

Au moment, où j'écris l'article, la version actuelle est la 2.5.1. Une documentation assez complète vous permettra d'effectuer les actions que vous désirez.

 

Usage de la bibliothèque

Pour avoir la date courante, on va utiliser la fonction moment() :

var now = moment();

Voyons son usage à travers le parsing et la validation :

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="moment.js"></script>
    
    <script>
      $(function() {
        var now = moment();
  
$('body').append([
     'Date: ' + now.format('YYYY-MM-DD'),
    'Heure et minutes: ' + now.format('HH:mm'),
    'Heure, minutes et secondes: ' + now.format('HH:mm:ss'),
    'Année/mois : ' + moment([2013]).format('YYYY-MM'),
    'Validité du mois ' + moment([2013, 13]).isValid(),
    'Date en chaine de caractères ' + new Date(2013, 02, 05).toString(),
    
        ].join('<br/>'));
      });
    </script>
  </head>

  <body>
    
  </body>
</html>

L'affichage qui va en résulter sera : 

Date: 2014-03-01
Heure et minutes: 01:27
Heure, minutes et secondes: 01:27:30
Année/mois : 2013-01
Validité du mois : false
Date en chaine de caractères Tue Mar 05 2013 00:00:00 GMT+0100

On a parsé nos dates, valider afin de savoir si le mois mis en paramètre est valide. Nous pouvons, également, utiliser la fonction toString pour mettre en chaines de caractères. Vous pourrez formater vos dates, au format français et dans la langue française car la version anglaise est native.

Cela est possible de cette manière :

moment.lang('fr', {
    months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
    monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
    weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
    weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
    weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
    longDateFormat : {
        LT : "HH:mm",
        L : "DD/MM/YYYY",
        LL : "D MMMM YYYY",
        LLL : "D MMMM YYYY LT",
        LLLL : "dddd D MMMM YYYY LT"
    },
    calendar : {
        sameDay: "[Aujourd'hui à] LT",
        nextDay: '[Demain à] LT',
        nextWeek: 'dddd [à] LT',
        lastDay: '[Hier à] LT',
        lastWeek: 'dddd [dernier à] LT',
        sameElse: 'L'
    },
    relativeTime : {
        future : "dans %s",
        past : "il y a %s",
        s : "quelques secondes",
        m : "une minute",
        mm : "%d minutes",
        h : "une heure",
        hh : "%d heures",
        d : "un jour",
        dd : "%d jours",
        M : "un mois",
        MM : "%d mois",
        y : "une année",
        yy : "%d années"
    },
    ordinal : function (number) {
        return number + (number === 1 ? 'er' : 'ème');
    },
    week : {
        dow : 1, // Monday is the first day of the week.
        doy : 4  // The week that contains Jan 4th is the first week of the year.
    }
});

De plus, vous pourrez calculer la durée entre deux dates, calculer la différence entre deux dates...

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="moment.js"></script>
    <script>
      $(function() {
        
  var now = moment();
  var date1 = '24-02-2014';
  var date2 = '25-02-2014';
  var testDate = '2014-02-28';
  var horaire1 = moment('18:34', "hh:mm");
  var horaire2 = moment('18:50', "hh:mm");
                   var diffHoraire = moment(horaire2.diff(horaire1)).format("mm");
  
$('body').append([
          'Date courante + 2 jours: ' + now.add('days', 2).format('DD-MM-YYYY'),
    'Date courante + 7 jours + 3 mois: ' + now.add('days', 2).add('months', 3).format('DD-MM-YYYY'),
    'Savoir si la date est antérieur à l\'autre ' + moment(date2).isBefore(date1),
    'Savoir si c\'est une année bissextile ' + moment([2016]).isLeapYear(),
    'Changement format date ' + moment(testDate).format('DD/MM/YYYY')
    'Date valide: ' + moment("30/02/2014","DD-MM-YYYY").isValid(),
          'Nombres de minutes entre deux horaires ' + diffHoraire + ' minutes'
        ].join('<br/>'));
      });
    </script>
  </head>

  <body>
    
  </body>
</html>

A l'affichage :

Date courante + 2 jours: 03-03-2014
Date courante + 7 jours + 3 mois: 05-06-2014
Savoir si la date est antérieur à l\'autre : false
Savoir si c\'est une année bissextile :  true
Changement format date 28/02/2014
Date valide: false
Nombres de minutes entre deux horaires: 16 minutes

Conclusion

La documentation assez dense, demande un peu de temps si vous souhaitez utiliser l'ensemble de la biblothèque. Pour en savoir plus, c'est ici.

 

comments powered by Disqus
Copyright © 2018 blogdevphp.fr - Tous droits réservés