Learn about how to format a JavaScript date

[admin]

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 :

Code: Select all

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 recognise is "UTC"; the default is the runtime's default time zone
hour12 :possible values are true and false; 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

Code: Select all

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 fulfil whatever need you may have, you might
want to consider creating a custom Date object that looks like this:

Code: Select all

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:

Code: Select all

day: 20
dayPadded: "20"
month: 1
monthPadded: "01"
monthName: "January"
year: 2019

To get a formatted string, you could do something like this:

Code: Select all

new DateObject().get(['dayPadded', 'monthPadded', 'year']);

That would produce the following output:
20-01-2016