Displaying a DateTime in local format in C# is relatively easy, but it will only use the server's settings to tell what "local" is.
For example, you might want 2016-03-07 14:35 UTC to show as 2016-03-07 15:35 for a visitor from a CET-timezone.
If you want to dynamically show the local date and time you can use the web-client's information through JavaScript and format it with Moment.js, for any user, anywhere in the world.
To do this in a way that is fault-tolerant and also SEO-friendly I want the UTC-DateTime to be hard-coded in the HTML and let Moment.js format it on the fly, when the page loads. To do this I need to populate my .cshtml-file with the following:
<span class="local-datetime"
title="@(Model.DateUtc.ToString("yyyy-MM-dd HH:mm")) UTC"
data-utc="@(Model.DateUtc.GetEpochTicks())">
@(Model.DateUtc.ToString("yyyy-MM-dd HH:mm")) UTC
</span>
Make sure you run .ToUniversalTime() on your DateTime first.
Notice the .GetEpochTicks()-extension method. It makes sure the format of the DateTime is passed in a format that Moment.js can handle easily. The implementation looks like this:
private static readonly DateTime Epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
public static double GetEpochTicks(this DateTime dateTime)
{
return dateTime.Subtract(Epoch).TotalMilliseconds;
}
The last step is to tell Moment.js to format our DateTime to a local format:
$('.local-datetime').each(function() {
var $this = $(this), utcDate = parseInt($this.attr('data-utc'), 10) || 0;
if (!utcDate) {
return;
}
var local = moment.utc(utcDate).local();
var formattedDate = local.format('YYYY-MM-DD HH:mm');
$this.text(formattedDate);
});
If this (or other, unrelated) JavaScript-code would fail for any reason the UTC-DateTime is the actually HTML-content and will still be displayed.
