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
