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 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

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