Convert json date to date format in jQuery

Hello everyone, I am going to share the code-sample for convert JSON date to date format using jQuery. Before implementation, you need first add the script file "date.format.js" for the reference to achieve this.

The date format js is give in the below section, please go below and see the date.format.js and copy and use it.

Table of content for JSON date format

JSON date
Parse JSON date to date
Date format types
Demo link for live output
JavaScript code for date format
Full example code for multiple date format

The JSON date is

/Date(1297246301973)/

The JQuery Code is

var jsonDate = "\/Date(1297246301973)\/";

var date = new Date(parseInt(jsonDate.substr(6)));

Here you can convert it to your specific given date format. i.e.

1. Default date format: "ddd mmm dd yyyy HH:MM:ss"

2. Short Date format: "m/d/yy"

3. Medium Date format: "mmm d, yyyy"

4. Long Date format: "mmmm d, yyyy"

5. Full Date format: "dddd, mmmm d, yyyy"

6. Short Time format: "h:MM TT"

7. Medium Time format: "h:MM:ss TT"

8. Long Time format: "h:MM:ss TT Z"

9. ISO Date format: "yyyy-mm-dd"

10. ISO Time format: "HH:MM:ss"

11. ISO DateTime format: "yyyy-mm-dd'T'HH:MM:ss"

12. ISO Utc Date Time format: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"

The live demo link http://embed.plnkr.co/P05l1a/preview

The Js code sample as given below

var date = "\/Date(1297246301973)\/";

var nowDate = new Date(parseInt(date.substr(6)));

var result = "";

result += nowDate.format("ddd mmm dd yyyy HH:MM:ss") + " : ddd mmm dd yyyy HH:MM:ss <br/>";

result += nowDate.format("dd/mm/yyyy") + " : dd/mm/yyyy <br/>";

result += nowDate.format("m/d/yy") + " : m/d/yy <br/>";

result += nowDate.format("mmm d, yyyy") + " : mmm d, yyyy <br/>";

result += nowDate.format("mmmm d, yyyy") + " : mmmm d, yyyy <br/>";

result += nowDate.format("dddd, mmmm d, yyyy") + " : dddd, mmmm d, yyyy <br/>";

result += nowDate.format("yyyy-mm-dd'T'HH:MM:ss") + " : yyyy-mm-dd'T'HH:MM:ss <br/>";

result += nowDate.format("UTC:yyyy-mm-dd'T'HH:MM:ss'Z'") + " : UTC:yyyy-mm-dd'T'HH:MM:ss'Z'<br/>";

$(function () {

$("#lblDate").html(result);

});

The example code as given below

<!DOCTYPE html>

<html>

<head>

<title>Convert json date to date format in jQuery</title>

var date = "\/Date(1297246301973)\/";

var nowDate = new Date(parseInt(date.substr(6)));

var result = "";

result += nowDate.format("ddd mmm dd yyyy HH:MM:ss") + " : ddd mmm dd yyyy HH:MM:ss <br/>";

result += nowDate.format("dd/mm/yyyy") + " : dd/mm/yyyy <br/>";

result += nowDate.format("m/d/yy") + " : m/d/yy <br/>";

result += nowDate.format("mmm d, yyyy") + " : mmm d, yyyy <br/>";

result += nowDate.format("mmmm d, yyyy") + " : mmmm d, yyyy <br/>";

result += nowDate.format("dddd, mmmm d, yyyy") + " : dddd, mmmm d, yyyy <br/>";

result += nowDate.format("yyyy-mm-dd'T'HH:MM:ss") + " : yyyy-mm-dd'T'HH:MM:ss <br/>";

result += nowDate.format("UTC:yyyy-mm-dd'T'HH:MM:ss'Z'") + " : UTC:yyyy-mm-dd'T'HH:MM:ss'Z'<br/>";

$(function () {

$("#lblDate").html(result);

});

</script>

</head>

<body>

<h1>Convert json date to date format in jQuery</h1>

</body>

</html>

//date.format.js

//Begin date.format.js

var dateFormat = function () {

var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,

timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,

timezoneClip = /[^-+\dA-Z]/g,

pad = function (val, len) {

val = String(val);

len = len || 2;

while (val.length < len) val = "0" + val;

return val;

};

// Regexes and supporting functions are cached through closure

return function (date, mask, utc) {

var dF = dateFormat;

// You can't provide utc if you skip other args (use the "UTC:" mask prefix)

if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {

mask = date;

date = undefined;

}

// Passing date through Date applies Date.parse, if necessary

date = date ? new Date(date) : new Date;

if (isNaN(date)) throw SyntaxError("invalid date");

mask = String(dF.masks[mask] || mask || dF.masks["default"]);

// Allow setting the utc argument via the mask

if (mask.slice(0, 4) == "UTC:") {

mask = mask.slice(4);

utc = true;

}

var _ = utc ? "getUTC" : "get",

d = date[_ + "Date"](),

D = date[_ + "Day"](),

m = date[_ + "Month"](),

y = date[_ + "FullYear"](),

H = date[_ + "Hours"](),

M = date[_ + "Minutes"](),

s = date[_ + "Seconds"](),

L = date[_ + "Milliseconds"](),

o = utc ? 0 : date.getTimezoneOffset(),

flags = {

d: d,

dd: pad(d),

ddd: dF.i18n.dayNames[D],

dddd: dF.i18n.dayNames[D + 7],

m: m + 1,

mm: pad(m + 1),

mmm: dF.i18n.monthNames[m],

mmmm: dF.i18n.monthNames[m + 12],

yy: String(y).slice(2),

yyyy: y,

h: H % 12 || 12,

hh: pad(H % 12 || 12),

H: H,

HH: pad(H),

M: M,

MM: pad(M),

s: s,

ss: pad(s),

l: pad(L, 3),

L: pad(L > 99 ? Math.round(L / 10) : L),

t: H < 12 ? "a" : "p",

tt: H < 12 ? "am" : "pm",

T: H < 12 ? "A" : "P",

TT: H < 12 ? "AM" : "PM",

Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),

o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),

S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]

};

return mask.replace(token, function ($0) {

return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);

});

};

}();

// Some common format strings

dateFormat.masks = {

"default": "ddd mmm dd yyyy HH:MM:ss",

shortDate: "m/d/yy",

mediumDate: "mmm d, yyyy",

longDate: "mmmm d, yyyy",

fullDate: "dddd, mmmm d, yyyy",

shortTime: "h:MM TT",

mediumTime: "h:MM:ss TT",

longTime: "h:MM:ss TT Z",

isoDate: "yyyy-mm-dd",

isoTime: "HH:MM:ss",

isoDateTime: "yyyy-mm-dd'T'HH:MM:ss",

isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"

};

// Internationalization strings

dateFormat.i18n = {

dayNames: [

"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",

"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"

monthNames: [

"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",

"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"

]

};

// For convenience...

Date.prototype.format = function (mask, utc) {

return dateFormat(this, mask, utc);

};

//END date.format.js

The output: go to link http://embed.plnkr.co/P05l1a/preview

Thank you!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2