Date Formatting - JavaScript

Overview

Dates are notoriously difficult to work with in JavaScript. This article outlines how create a JavaScript Date object from a JSON object acquired via an AJAX call, and formats the date using the familiar .NET formatting codes.

Sample Usage

Controller Code

public class MyController : Controller
{
    [HttpPost]
    public JsonResult GetData()
    {
        var item = new { MyDate = DateTime.Now, Message = "Hello world" }
        return Json(item);
    }
}

JavaScript Code

After the following code runs, the page element with ID "myDate" will contain the current date, e.g., "September 2011".

$.ajax({
    type: 'post',
    url: '/MyController/GetData',
    datatype:'json',
    success: function(data){

        var myDate = Date.fromJsonDate(data.MyDate).toFormat("MMMM yyyy");
        $('#myDate').html(myDate);

    }

Reusable JavaScript Code

/*===============================================================================================*/
Date.fromJsonDate = function (input) {
    ds = input.substr(6, input.length - 8) * 1;
    return new Date(ds);
}
/*===============================================================================================*/
Date.prototype.getMonthName = function () {

    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
		'September', 'October', 'November', 'December'];

    return monthNames[this.getMonth()];

}
/*===============================================================================================*/
Date.prototype.toFormat = function (formatCode) {

    /*--- Date ---*/
    var MMMM = this.getMonthName();
    var MMM = MMMM.substr(0, 3);
    var M = this.getMonth() + 1;
    var MM = (M < 10 ? "0" : "") + M;
    var d = this.getDate();
    var dd = (d < 10 ? "0" : "") + d;
    var yyyy = this.getFullYear();
    var yy = (yyyy + "").substr(2, 2);

    /*--- Time ---*/
    var H = this.getHours();
    var HH = (H < 10 ? "0" : "") + H;
    var tt = (H < 12 ? 'am' : 'pm');
    var hr = H % 12;
    var h = (hr == 0 ? 12 : hr);
    var hh = (h < 10 ? "0" : "") + h;
    var m = this.getMinutes()
    var mm = (m < 10 ? "0" : "") + m;
    var s = this.getSeconds();
    var ss = (s < 10 ? "0" : "") + s;

    /*--- Result ---*/
    var result = formatCode;
    result = result.replace("MMMM", MMMM);
    result = result.replace("MMM", MMM);
    result = result.replace("MM", MM);
    result = result.replace("M", M);
    result = result.replace("dd", dd);
    result = result.replace("d", d);
    result = result.replace("yyyy", yyyy);
    result = result.replace("yy", yy);
    result = result.replace("HH", HH);
    result = result.replace("H", H);
    result = result.replace("hh", hh);
    result = result.replace("h", h);
    result = result.replace("mm", mm);
    result = result.replace("ss", ss);
    result = result.replace("tt", tt);
    return result;

}
/*===============================================================================================*/