[EDIT]:
Forget this article and use new Date().toLocaleDateString('fr', {day: 'numeric', weekday: 'long', month: 'long', year: 'numeric'})
. The toLocaleDateString
is perfect for most use.
My default choice for date formatting in JavaScript used to be Moment.js . It is a great library. A really complete solution to manage dates. I still use it server side. But 16.6k gziped, or 62.4 k with all the locales for one function ? That is way to much !
The cost of downloading and parsing that code is not that high. But if you add small stuff, you end up with a bloated web application. And that is not good for users. For some times, I’ve been using my own little module. This is nowhere near the capabilities of Moment.js. But the job is done for formatting.
Here is my small 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
Notice how you need two spaces to have one space in the result. This is to avoid complex regular expression and parse with a simple switch statement.
You may want to extend it to add other formatting possibilities. YW
for year week (from 1 to 52) could be added for example. You prefer having short days on one or two letters instead of three? Change it ! We often have specific needs that would require tweaking a library. When you write your own module, there are some pitfalls, but this is a benefit.
I18n is easy. For example, change the weekdays Array to be a function :
const weekdaysShort = () => {
switch( global.locale ) {
// Any way you store your current locale
// maybe in a redux store ?
case 'en' :
return [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
break;
case 'fr' :
return [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ];
break;
}
}