Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / XML

Displaying date/time using the user timezone in ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
23 Nov 2012LGPL31 min read 27.5K   5  
How to display date/time using the user timezone (without it being configured anywhere in your application)

This post will show you how you can display date/time using the user timezone (without it being configured anywhere in your application).

Storing Dates in your Data Source

The first thing you have to do is to make sure that all dates are stored using Universal Cordinated Time (UTC).

The easiest way to do that is to convert it like this:

C#
var dbDate = myDate.ToUniversalTime();

When loading dates, simply do no conversion at all.

Displaying the date/time

The date/time cannot be formatted server-side since the HTTP request contains no information about the time zone. Instead, we have to do it client side (or start using AJAX to configure server side).

Hence, we need to push the date to the client in a way that would allow us to reformat it. The easiest way to do that is to create a display template. The great thing with that is that all date/times will automatically be reformatted if you are using Html.DisplayFor.

Create a template named /Views/Shared/DisplayTemplates/DateTime.cshtml with the following content:

XML
@model DateTime
<span data-date="@Model.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds">@Model.ToString()</span>

We simply display the date as UTC. But we do also include the unix date in an attribute. We’ll use that to do the formatting.

Formatting the date/time

Now we only have the formatting left. For that, we’ll use a combination of standard JavaScript and jQuery.

Add this somewhere in your application:

JavaScript
<script type="text/javascript">
$(function(){
    $('[data-date]', container).each(function () {
        // the date construct will automatically convert to local time
        var localDate = new Date(parseInt($(this).attr('data-date')));

        //display time only for today, otherwise only the date.
        // feel free to use your own logic
        var now = new Date();
        if (localDate.getDate() == now.getDate() && localDate.getFullYear() == now.getFullYear() 
                                                 && now.getMonth() == localDate.getMonth()) {
            $(this).html(localDate.toLocaleTimeString());
        } else {
            $(this).html(localDate.toLocaleDateString());
        }
    });
});
</script>

End Result

Done.

The post Displaying date/time using the user timezone in ASP.NET MVC appeared first on jgauffin's coding den.

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


Written By
Founder 1TCompany AB
Sweden Sweden

Comments and Discussions

 
-- There are no messages in this forum --