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
The example code 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>
<meta charset="utf-8" />
<title>Convert json date to date
format in jQuery</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="date.format.js"></script>
<script>
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>
<label id="lblDate" style="color:green;"></label>
</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!