CODEWITHSUNDEEP
c#jquery.netajax
sabbir
sabbir

Reputation: 37

Conversion of date time in jQuery

I have a ajax request which get the date time from database. For example, Date time is 3/24/2014 10:15:35 AM, And I want to show this date time into my razor view page. My Code ::

View code ::

 $.ajax({
        url: "/Home/CheckLatestTicket",
        type: "POST",
        success: function (data) {
            var date = Date(data);              
            $("#latestTicket").html("<p style='font-size: 15px;'>" + date + "</p>");
        }
    });

Controller Ajax request:

    public ActionResult CheckLatestTicket()
    {
        DateTime result = (from t in db.imsticket where t.viewTicketClient == 0 && t.OrganizationId == 1 orderby t.createTicket descending select t.createTicket ).FirstOrDefault();

        return Json(result);
    }

Using this code I only get the current date time with the following format::

this is actual result from ajax request

   /Date(1395634535793)/

This is the result, which is showed in the page: (which is current date time)

Mon Mar 24 2014 17:50:26 GMT+0600 (Bangladesh Standard Time)

I want to show this result

    3/24/2014 10:15:35 AM

Upvotes: 0

Views: 1965

Answers (4)

sabbir
sabbir

Reputation: 2025

I think you should try client-side conversion so that you can get other information from Ajax request. You can follow the code:

$.ajax({
   url: "/Home/CheckLatestTicket",
   type: "POST",
   success: function (data) {
      var thisDate = new Date(parseInt(data.substr(6)));    
      $("#latestTicket").html("<p style='font-size: 15px;'>" + thisDate.toLocaleString() + "</p>");
   }
});

Upvotes: 1

writeToBhuwan
writeToBhuwan

Reputation: 3281

Simply. Send it as a string rather than a DateTime object. 

public ActionResult CheckLatestTicket()
{
    DateTime result = (from t in db.imsticket where t.viewTicketClient == 0 && t.OrganizationId == 1 orderby t.createTicket descending select t.createTicket ).FirstOrDefault();

    return Json(result.ToString("MM/dd/yyyy hh:mm:ss tt"));
}

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93631

As I was saying in my earlier comment:

Do you want the date format (dd/mm/yyyy, mm/dd/yyyy) etc to vary based on the browser locale? If not a simple return Json(result.ToString("MM/dd/yyyy hh:mm:ss tt")); will do the formatting server-side.

e.g. Server-side:

public ActionResult CheckLatestTicket()
{
    DateTime result = (from t in db.imsticket where t.viewTicketClient == 0 && t.OrganizationId == 1 orderby t.createTicket descending select t.createTicket ).FirstOrDefault();

    return Json(result.ToString("MM/dd/yyyy hh:mm:ss tt"));
}

If you want to do it client side, based on the browser locale, it gets more complicated.

As your data is already a Date object a fixed format is easy:

e.g. Client-side Fixed format:

$.ajax({
    url: "/Home/CheckLatestTicket",
    type: "POST",
    success: function (data) {
        $("#latestTicket").html("<p style='font-size: 15px;'>" + data.customFormat( "#MM#/#DD#/#YYYY# #hh#:#mm#:#ss#" ) + "</p>");
    }
});

To dynamically display in the correct locale takes more effort. The toLocaleDateString() method of Date returns different styles of date per browser (full month name vs. month number etc) or you could have done this:

e.g. Client Side localised format:

$.ajax({
    url: "/Home/CheckLatestTicket",
    type: "POST",
    success: function (data) {
        $("#latestTicket").html("<p style='font-size: 15px;'>" + data.toLocaleDateString() + data.customFormat( " #hh#:#mm#:#ss#" ) + "</p>");
    }
});

To go beyond this you could check the locale with var locale = window.navigator.userLanguage || window.navigator.language; and test for specific languages, but you have not specified if you need this level of control.

Upvotes: 0

dreamweiver
dreamweiver

Reputation: 6002

Custom format the data & time as required like this

 $.ajax({
    url: "/Home/CheckLatestTicket",
    type: "POST",
    success: function (data) {
        var date = Date(data);       
        var dt= date.customFormat( "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss#" ); //custom formatting       
        $("#latestTicket").html("<p style='font-size: 15px;'>" + dt+ "</p>");
    }
});

Happy Coding :)

Upvotes: 0

Related Questions