[EDIT 2018]:
Oubliez cet article et utilisez new Date().toLocaleDateString('fr', {day: 'numeric', weekday: 'long', month: 'long', year: 'numeric'})
. LâAPI toLocaleDateString
est parfaite pour la plupart des usages.
Mon choix par dĂ©faut pour formater des dates en JavaScript a longtemps Ă©tĂ© Moment.js . Câest une solution vraiment complĂšte pour gĂ©rer les dates ; et je lâutilise encore cĂŽtĂ© serveur. Mais 16.6k gzipĂ©, ou 62.4 k avec toutes les locales pour une seule fonctionnalitĂ© ? Câest trop pour moi.
Le coĂ»t du tĂ©lĂ©chargement et du parsing de ce code nâest pas insurmontable en soit. Mais additionnĂ© Ă tout le reste, on finit par avoir une application trop lourde. Câest mauvais pour les utilisateurs. Depuis pas mal de temps, jâutilise mon petit module pour le formatage. Câest loin de couvrir toutes les fonctions de Moment.js. Mais ça fait le job pour le formatage.
Le code du module :
/**
* Format a Date
* @param * date Anything that can be parsed
* to a Date Object in JavaScript
* 2017-01-01, 1483228800000...
* @param String format See switch statement for
* accepted values
* @return String formated Date
*/
const ensureDoubleDigit = value => value < 10 ? '0' + value : value;
const monthsShort = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
const monthsLong = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];
const weekdaysShort = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
const weekdaysLong = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ];
export default function formatDate( dateInput, format ) => {
const date = new Date( dateInput );
return format.split( ' ' ).map(
token => {
switch ( token ) {
case '':
return ' ';
break;
case 'YYYY': // Full year
return date.getFullYear();
break;
case 'M': // Month number
return date.getMonth() + 1;
break;
case 'MM': // Month short
return monthsShort[ date.getMonth() ];
break;
case 'MMM': // Month long
return monthsLong[ date.getMonth() ];
break;
case 'D': // Month day
return date.getDate();
break;
case 'WD': // Week day short
return weekdaysShort[ date.getDay() ];
break;
case 'WDD': // Week day long
return weekdaysLong[ date.getDay() ];
break;
case 'h': // Hours
return date.getHours();
break;
case 'hh': // Hours double digits
return ensureDoubleDigit( date.getHours() );
break;
case 'm': // Minutes
return date.getMinutes();
break;
case 'mm': // Minutes double digits
return ensureDoubleDigit( date.getMinutes() );
break;
case 's': // Seconds
return date.getSeconds();
break;
case 'ss': // Seconds double digits
return ensureDoubleDigit( date.getSeconds() );
break;
default: // For unknown tokens just return them
return token;
break;
}
}
).join( '' );
};
formatDate( new Date(), 'YYYY - M - D // hh : mm : ss' );
> 2017-5-31 // 10:29:08
Remarquez quâil faut deux espaces pour en obtenir un dans le format final. Câest pour Ă©viter dâavoir Ă recourir Ă des expressions rĂ©guliĂšres complexes. Un simple split et un switch font le travail.
On peut vouloir éditer le module pour ajouter ou modifier des possibilités de formatage. Par exemple, ajouter YM
pour le numĂ©ro de la semaine dans lâannĂ©e (de 1 Ă 52). Si vous prĂ©fĂ©rez avoir les jours sur une ou deux lettres au lieu de trois, il suffit dâĂ©diter les donnĂ©es correspondantes. On a souvent des besoins qui requiĂšrent des petits hacks sur les librairies que lâon utilise. Ăcrire ses modules a des inconvĂ©nients ; mais ça a le bĂ©nĂ©fice de la modularitĂ©.
Pour internationaliser, ce nâest pas plus compliquĂ©. Par exemple pour les jours de la semaine :
const weekdaysShort = () => {
switch( global.locale ) {
// LĂ oĂč la locale est stockĂ©e
// peut-ĂȘtre dans un store redux ?
case 'en' :
return [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
break;
case 'fr' :
return [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ];
break;
}
}