ASP.NET MVC Client side time convert from model

Question

My cshtml page contains the following code for DateTime, which is some server time fetched from sql.

<tbody>
        @{
            foreach (var item in Model) 
            {  
                <tr>
                    <td>     
@Html.DisplayFor(modelItem => item.someDate)                                          
                    </td>

The type of the someDate property is DateTime. I would like to show the time in respect to client/browser time zone, preferably using JavaSscript. What is the simples way of doing this? I looked at various similar answers but none using Html.DisplayFor and JavaScript. I tried to use this code, but it doesn't work:

@(Html.DisplayFor(modelItem => item.someDate)).toLocaleString();

or

var localDateTime = new Date(item.someDate).toLocaleString();
@Html.DisplayFor(localDateTime )

The above may require template that I am not comfortable with as it is giving error.

Andrei V · Accepted Answer · 2015-06-15 10:55:31Z

1

I don't think you can achieve this without using JavaScript. Here's something you could try (using jQuery for convenience):

foreach (var item in Model) 
{  
   <tr>
       <td data-iso="@item.someDate.ToString("o")"></td>
   </tr>
}

Afterwards, in document.ready just parse the date and set the locale in the td:

$("document").ready(function () {
    $("td").each(function (index, elem) {
        var date = new Date($(elem).data("iso"));
        $(elem).html(date.toString());
    });
});

This solution converts the date using the ISO 8601 format, which is one of the many formats supported by the JavaScrip Date constructor.

edited Jun 15, 2015 at 10:55

answered Jun 15, 2015 at 8:35

Andrei V

7,5187 gold badges48 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

AKS Over a year ago

I tried above and it is not working. The code never enters $("td").each(function (index, elem) function. I put debugger; inside it as first statement and browse in chrome with developer tools. Logically it appear correct as I like to use javascript , jquery is ok till solution didn't become complex. but there is some issue in jquery.

Andrei V Over a year ago

Does the table get generated? Can you see it in your web page? Can you inspect the elements using the developer tools? If the table is correctly rendered, then directly in the console try var cells = $("td") and see if all the table cell are selected.

AKS Over a year ago

yes, the table get generated but the date field is empty. i debug and found that the code is not entering in $("td").each(function (index, elem) { function.

Andrei V Over a year ago

Where are you placing the JavaScript code? Also, after writing var cells = $("td") in the console, write cells again, and hit "return". You should see all the available cells.

Andrei V Over a year ago

@AKS, using $(elem).html(date.toString()); should work; I updated my answer. Please check each value in the each function: elem should be a td element, $(elem).data("iso") should return an ISO 8601 date (e.g. "2015-06-01T09:47:31.7570000") as string, date should be a valid JavaScript Date object (corresponding to the ISO date).

|

Collectives™ on Stack Overflow

ASP.NET MVC Client side time convert from model

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related