JavaScript Date Formatting a JavaScript date
Example
Formatting a JavaScript date in modern browsers
In modern browsers (*), Date.prototype.toLocaleDateString() allows you to define the formatting of a Date in a convenient manner.
It requires the following format :
dateObj.toLocaleDateString([locales [, options]])
The locales parameter should be a string with a BCP 47 language tag, or an array of such strings.
The options parameter should be an object with some or all of the following properties:
- localeMatcher : possible values are
"lookup"and"best fit"; the default is"best fit" - timeZone : the only value implementations must recognize is
"UTC"; the default is the runtime's default time zone - hour12 :possible values are
trueandfalse; the default is locale dependent - formatMatcher : possible values are
"basic"and"best fit"; the default is"best fit" - weekday : possible values are
"narrow","short"&"long" - era : possible values are
"narrow","short"&"long" - year : possible values are
"numeric"&"2-digit" - month : possible values are
"numeric","2-digit","narrow","short"&"long" - day : possible values are
"numeric"&"2-digit" - hour : possible values are
"numeric"&"2-digit" - minute : possible values are
"numeric"&"2-digit" - second : possible values are
"numeric"&"2-digit" - timeZoneName : possible values are
"short"&"long"
How to use
var today = new Date().toLocaleDateString('en-GB', {
day : 'numeric',
month : 'short',
year : 'numeric'
});
Output if executed on January 24ᵗʰ, 2036 :
'24 Jan 2036'
Going custom
If Date.prototype.toLocaleDateString() isn't flexible enough to fulfill whatever need you may have, you might want to consider creating a custom Date object that looks like this:
var DateObject = (function() {
var monthNames = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
var date = function(str) {
this.set(str);
};
date.prototype = {
set : function(str) {
var dateDef = str ? new Date(str) : new Date();
this.day = dateDef.getDate();
this.dayPadded = (this.day < 10) ? ("0" + this.day) : "" + this.day;
this.month = dateDef.getMonth() + 1;
this.monthPadded = (this.month < 10) ? ("0" + this.month) : "" + this.month;
this.monthName = monthNames[this.month - 1];
this.year = dateDef.getFullYear();
},
get : function(properties, separator) {
var separator = separator ? separator : '-'
ret = [];
for(var i in properties) {
ret.push(this[properties[i]]);
}
return ret.join(separator);
}
};
return date;
})();
If you included that code and executed new DateObject() on January 20ᵗʰ, 2019, it would produce an object with the following properties:
day: 20
dayPadded: "20"
month: 1
monthPadded: "01"
monthName: "January"
year: 2019
To get a formatted string, you could do something like this:
new DateObject().get(['dayPadded', 'monthPadded', 'year']);
That would produce the following output:
20-01-2016
(*) According to the MDN, "modern browsers" means Chrome 24+, Firefox 29+, IE11, Edge12+, Opera 15+ & Safari nightly build
