How do I format a Javascript Date?

Question

How do I format this date so that the alert displays the date in MM/dd/yyyy format?

<script type="text/javascript">
   var date = new Date();
   alert(date);
</script>

Answer 1

You have to get old school on it:

Date.prototype.toMMddyyyy = function() {

    var padNumber = function(number) {

        number = number.toString();

        if (number.length === 1) {
            return "0" + number;
        }
        return number;
    };

    return padNumber(date.getMonth() + 1) + "/" 
         + padNumber(date.getDate()) + "/" + date.getFullYear();
};

Answer 2

You prototype a method so you never have to do this irritating task again:

Date.prototype.toFormattedString = function (f)
{
    var nm = this.getMonthName();
    var nd = this.getDayName();
    f = f.replace(/yyyy/g, this.getFullYear());
    f = f.replace(/yy/g, String(this.getFullYear()).substr(2,2));
    f = f.replace(/MMM/g, nm.substr(0,3).toUpperCase());
    f = f.replace(/Mmm/g, nm.substr(0,3));
    f = f.replace(/MM\*/g, nm.toUpperCase());
    f = f.replace(/Mm\*/g, nm);
    f = f.replace(/mm/g, String(this.getMonth()+1).padLeft('0',2));
    f = f.replace(/DDD/g, nd.substr(0,3).toUpperCase());
    f = f.replace(/Ddd/g, nd.substr(0,3));
    f = f.replace(/DD\*/g, nd.toUpperCase());
    f = f.replace(/Dd\*/g, nd);
    f = f.replace(/dd/g, String(this.getDate()).padLeft('0',2));
    f = f.replace(/d\*/g, this.getDate());
    return f;
};

(and yes you could chain those replaces, but it's not here for readability before anyone asks)

---

As requested, additional prototypes to support the above snippet.

Date.prototype.getMonthName = function ()
{
    return this.toLocaleString().replace(/[^a-z]/gi,'');
};

//n.b. this is sooo not i18n safe :)
Date.prototype.getDayName = function ()
{
    switch(this.getDay())
    {
     case 0: return 'Sunday';
     case 1: return 'Monday';
     case 2: return 'Tuesday';
     case 3: return 'Wednesday';
     case 4: return 'Thursday';
     case 5: return 'Friday';
     case 6: return 'Saturday';
    }
};

String.prototype.padLeft = function (value, size) 
{
    var x = this;
    while (x.length < size) {x = value + x;}
    return x;
};

and usage example:

alert((new Date()).toFormattedString('dd Mmm, yyyy'));

Answer 3

With a proper library you could internationalize your app for the whole world with just a few lines of code. By default it automatically localizes the date for the browser locale, but you can also define your own patterns:

dojo.date.locale.format(
  new Date(2007,2,23,6,6,6),
  {datePattern: "yyyy-MM-dd", selector: "date"}
);
// yields: "2007-03-23"

From: Formatting dates and times using custom patterns

Answer 4

A useful set of Date prototype methods is available from jquery:

http://jqueryjs.googlecode.com/svn/trunk/plugins/methods/date.js

See asString method for formatting

Answer 5

YUI also provides support for date formatting, which was covered in a series of recent blog posts:

• Date Formatting with YUI – Part I
• Date Formatting with YUI – Part II
• Date Formatting with YUI – Part III
• Date Formatting with YUI – Part IV

Answer 6

Just another option:

DP_DateExtensions Library

Not saying it's any better than the other options, but I like it (of course I'm not completely unbiased).

Answer 7

You rip the .toFormattedString function out of microsofts excellent and now sadly missed atlas library:

Date.prototype.toFormattedString = function (format) {

var dtf = Sys.CultureInfo.DateTimeFormat;

if (!format)
    format = "F";

if (format.length == 1) {
    switch (format) {
        case "d":
            format = dtf.ShortDatePattern;
            break;
        case "D":
            format = dtf.LongDatePattern;
            break;
        case "t":
            format = dtf.ShortTimePattern;
            break;
        case "T":
            format = dtf.LongTimePattern;
            break;
        case "F":
            format = dtf.FullDateTimePattern;
            break;
        case "M": case "m":
            format = dtf.MonthDayPattern;
            break;
        case "s":
            format = dtf.SortableDateTimePattern;
            break;
        case "Y": case "y":
            format = dtf.YearMonthPattern;
            break;
        default:
            throw Error.createError("'" + format + "' is not a valid date format");
    }
}

var regex = /dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yy|y|hh|h|HH|H|mm|m|ss|s|tt|t|fff|ff|f|zzz|zz|z/g;

var ret = "";
var hour;

function addLeadingZero(num) {
    if (num < 10) {
        return '0' + num;
    }
    return num.toString();
}

function addLeadingZeros(num) {
    if (num < 10) {
        return '00' + num;
    }
    if (num < 100) {
        return '0' + num;
    }
    return num.toString();
}

for (; ; ) {

    var index = regex.lastIndex;

    var ar = regex.exec(format);

    ret += format.slice(index, ar ? ar.index : format.length);

    if (!ar) break;

    switch (ar[0]) {
        case "dddd":
            ret += dtf.DayNames[this.getDay()];
            break;
        case "ddd":
            ret += dtf.AbbreviatedDayNames[this.getDay()];
            break;
        case "dd":
            ret += addLeadingZero(this.getDate());
            break;
        case "d":
            ret += this.getDate();
            break;
        case "MMMM":
            ret += dtf.MonthNames[this.getMonth()];
            break;
        case "MMM":
            ret += dtf.AbbreviatedMonthNames[this.getMonth()];
            break;
        case "MM":
            ret += addLeadingZero(this.getMonth() + 1);
            break;
        case "M":
            ret += this.getMonth() + 1;
            break;
        case "yyyy":
            ret += this.getFullYear();
            break;
        case "yy":
            ret += addLeadingZero(this.getFullYear() % 100);
            break;
        case "y":
            ret += this.getFullYear() % 100;
            break;
        case "hh":
            hour = this.getHours() % 12;
            if (hour == 0) hour = 12;
            ret += addLeadingZero(hour);
            break;
        case "h":
            hour = this.getHours() % 12;
            if (hour == 0) hour = 12;
            ret += hour;
            break;
        case "HH":
            ret += addLeadingZero(this.getHours());
            break;
        case "H":
            ret += this.getHours();
            break;
        case "mm":
            ret += addLeadingZero(this.getMinutes());
            break;
        case "m":
            ret += this.getMinutes();
            break;
        case "ss":
            ret += addLeadingZero(this.getSeconds());
            break;
        case "s":
            ret += this.getSeconds();
            break;
        case "tt":
            ret += (this.getHours() < 12) ? dtf.AMDesignator : dtf.PMDesignator;
            break;
        case "t":
            ret += ((this.getHours() < 12) ? dtf.AMDesignator : dtf.PMDesignator).charAt(0);
            break;
        case "f":
            ret += addLeadingZeros(this.getMilliseconds()).charAt(0);
            break;
        case "ff":
            ret += addLeadingZeros(this.getMilliseconds()).substr(0, 2);
            break;
        case "fff":
            ret += addLeadingZeros(this.getMilliseconds());
            break;
        case "z":
            hour = this.getTimezoneOffset() / 60;
            ret += ((hour >= 0) ? '+' : '-') + Math.floor(Math.abs(hour));
            break;
        case "zz":
            hour = this.getTimezoneOffset() / 60;
            ret += ((hour >= 0) ? '+' : '-') + addLeadingZero(Math.floor(Math.abs(hour)));
            break;
        case "zzz":
            hour = this.getTimezoneOffset() / 60;
            ret += ((hour >= 0) ? '+' : '-') + addLeadingZero(Math.floor(Math.abs(hour))) +
            dtf.TimeSeparator + addLeadingZero(Math.abs(this.getTimezoneOffset() % 60));
            break;
        default:
            debug.assert(false);
    }
}
return ret;

}