Mise en forme des chaînes de date/heure -- JQuery JavaScript date format

Javascript fournit nativement toutes les fonctionnalités de traitement des dates et heures , Cependant , dès qu’il s'agit de la présentation des dates au formats humains je dirais on dispose plus de méthodes directes qui nous permettent de faire ça . Les raisons a ça sont fort nombreuses notamment la différences de culture de langues des internautes chacun a besoin en effet d'un format bien particulier . De ce fait il existe un formatage pour chaque langue et culture ici on présentera les dates au format français qui pourra bien sure être traduit dans d autre cultures : Venons au but : On citera d'abord les méthodes de formatage de date déjà connues et utilisées leurs avantages et limites avant de présenter notre solution ici .
La méthode JQUERY
JQueryUI grâce au datepicker nous permet de formater une date et de la traduire également pour l'utiliser faut bien sure inclure JQuery et JQueryUI



 
 


et de traduire les noms des mois des jours comme fournit dans JQueryUI ce qui se fait comme suit :


var dateSettings={
       //noms des mois 
      monthNames: ['Janvier','Fèvrier','Mars','Avril','Mai','Juin',
   'Juillet','Août','Septembre','Octobre','Novembre','Décembre'], 
         //noms des courts  
   monthNamesShort: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun',       'Jul','Aou', 'Sep', 'Oct', 'Nov', 'Dec'], 
                        
         //noms des jours           
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi','Vendredi', 'Samedi'],
                 
  //noms des jours courts              
  dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']
       }  





A present on peut utiliser directement les methodes de JQueryUI


 $.datepicker.formatDate("d M yy",new Date(1995,11,11),dateSettings);
//11 Dec 1995
 $.datepicker.formatDate("DD, dd MM yy",new Date(1995,11,11),dateSettings);
// Lundi, 11 Décembre 1995
$.datepicker.formatDate("yy-mm-dd",new Date(1995,11,11),dateSettings);
//11-12-1995
//.......voir jquery datepicker pour les autres formats de date disponibles 



Citiques :
- Avec JQuery datepicker on peut formater les dates et heures correspondants a la plus part des formats dates connus ATOM,COOKIE,ISO_8601....
- Pour utiliser cette méthode on est obligé d inclure JQuery et JQueryUI du moins le datepicker ce qui est parfois lourd si on a juste une simple page
- On pourra citer quelques anomalies a cette méthode
   $.datepicker.formatDate("Aujourd'hui : dd-mm-yy",new Date(),dateSettings);
   //Auj4ur4hui : dd-mm-yy
   //le d et le o de Aujourd'hui est remplace par la date du jour 
   //la présence de l apostrophe a empêcher de finir le formatage  
   //........
//.......

Autres méthodes
Voici une fonction Javascript qui permet de formater la date au format les plus divers et même d’utiliser d'autres chaines dans le format
  function formatDate(date,format,dateSettings){
      var d=date.getDate();
      var dy=date.getDay();
      var y=date.getFullYear();
      var M=date.getMonth();
      var H=date.getHours();
      var m=date.getMinutes();
      var s=date.getSeconds();
      var z=date.getTimezoneOffset()/60*100;
      z = z<0?"+"+Math.abs(z):"-"+Math.abs(z);
       var matches={
          "M{4,}"  :     [ "g",  dateSettings.monthNames[M]],
           "M{3}"    :     [ "g",    dateSettings.monthNamesShort[M] ],
            "M{2}"    :     [ "g", M<9?"0"+(M+1):M+1 ],
             "M{1}"   :     [ "g",  M+1  ],
              "Y{3,}"  :     [ "gi",   y    ],
               "Y{1,2}" :     [ "gi",  (y+"").substring(2) ],
             "D{4,}"  :     [ "gi",  dateSettings.dayNames[dy] ],
              "D{3}"   :      [ "gi", dateSettings.dayNamesShort[dy] ],
               "D{2}"   :      [ "g",  dateSettings.dayNames[dy] ],
                "D{1}"   :      [ "g", dateSettings.dayNamesShort[dy]] ,
               "d{2}"   :      [ "g", d<9?"0"+d:d   ],
                "d{1}"   :      [ "g", d            ],
                "m{2,}"  :      [ "g",  m<9?"0"+m:m    ],
                 "m{1}"   :      [ "g",  m              ],
                 "s{1}"   :      [ "gi",   s            ] ,
    "s{2}"   :      [ "gi",  s<9?"0"+s:s   ]  ,
    "H{1}"   :      [ "gi",  H             ] ,
     "H{2,}"  :      [ "gi",  H<9?"0"+H:H ] ,    
     "Z{1,}"  :      [ "gi",   "GMT"+z ] ,    
     
       }
       for(var match in matches){
             var reg=new RegExp("(^|[\\W]+)("+match+")($|[\\W]+)" , matches[match][0]);
     format= format.replace(reg , "$1"+matches[match][1]+"$3");
       }
     return format 
    }


Voici quelques tests de cette fonctions
formatDate(new Date(),"dd-MM-YY",dateSettings);
//04-01-13
formatDate(new Date(),"DD dd-MMM-YYY",dateSettings)
//Vendredi 04-Jan-2013
formatDate(new Date(),"D dd-MMM-YYY",dateSettings);
//Ven 04-Jan-2013
formatDate(new Date(),"DDDD, dd MMMM YYYY",dateSettings)
//Vendredi, 04 Janvier 2013
formatDate(new Date(),"Aujourd'hui : DDDD, dd MMMM YYYY",dateSettings)
//Aujourd'hui : Vendredi, 04 Janvier 2013
formatDate(new Date(),"Aujourd'hui : DDDD, dd MMMM YYYY hh:mm ss",dateSettings);
//Aujourd'hui : Vendredi, 04 Janvier 2013 20:55 35

formatDate(new Date(),"Aujourd'hui : DDDD, dd MMMM YYYY hh:mm ss z",dateSettings);
//Aujourd'hui : Vendredi, 04 Janvier 2013 20:56 44 GMT+100
//.....
//....
//..... 
Bien sure cette méthode on pourrait la personnaliser a ses besoins et cas particuliers

0 commentaires:

Enregistrer un commentaire