Convert json date to date format in jQuery

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
  1. JSON date
  2. Parse JSON date to date
  3. Date format types
  4. Demo link for live output
  5. JavaScript code for date format
  6. 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 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>
    <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!


ANIL SINGH

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

www.code-sample.com/. Powered by Blogger.
^