Skip to content

Instantly share code, notes, and snippets.

@GER-NaN
Last active July 11, 2017 17:59
Show Gist options
  • Select an option

  • Save GER-NaN/d51c07ea61b2166f10f5099f9b69b19a to your computer and use it in GitHub Desktop.

Select an option

Save GER-NaN/d51c07ea61b2166f10f5099f9b69b19a to your computer and use it in GitHub Desktop.
MVC DisplayTemplate view and related javascript code to help with converting UTC stored in database to users local time via JS in the browser
@using SPRI.WebsiteUtilities
@model DateTime
@*
Note: only meant to serve timezone conversions in the USA and maybe NA and SA.
Gives you a label with the date formatted to ISO 8601 format, javascript will understand this and be able to convert for display.
Adds a class that js looks for when converting stuff.
*@
@if (Model.Kind != DateTimeKind.Utc && Model.Kind != DateTimeKind.Unspecified)
{
Debug.WriteLine("DateTime attempted to be localized that was not in UTC format. Display errors will occurr. " + Model.Kind + " " + Model.ToString("O"));
}
@if (Model.Kind == DateTimeKind.Unspecified)
{
@*Assume its UTC and the Kind hasn't been set correctly. This will probably occurr most of the time.*@
<span class="localize-utc-date">
@DateTime.SpecifyKind(Model, DateTimeKind.Utc).ToString("O")
</span>
}
else
{
<span class="localize-utc-date">
@Model.ToString("O");
</span>
}
//should probably be using a library for all this formatting (moment.js)
var monthsShort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
$(document).ready(function() {
$(".localize-utc-date").each(function() {
var utcDate = $(this).text().trim();
var localDate = new Date(utcDate);
var outputFormat;
//If it occured today, we can be nice and show just the time...
if (localDate.toDateString() === new Date().toDateString()) {
outputFormat =
"Today at " +
localDate.getHours() + ":" +
('00' + localDate.getMinutes()).slice(-2);
} //If it occured this year we dont need to print the year
else if (localDate.getYear() === new Date().getYear()) {
outputFormat =
monthsShort[localDate.getMonth()] + " " +
localDate.getDate() + " at " +
localDate.getHours() + ":" +
('00' + localDate.getMinutes()).slice(-2);
} //If it occured outside this year then we put the year,
else {
outputFormat =
monthsShort[localDate.getMonth()] + " " +
localDate.getDate() + " '" +
localDate.getFullYear().toString().substring(2); //gets confusing for years <2000 or >3000
}
$(this).text(outputFormat);
$(this).prop("title", localDate.toString()); //tooltip
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment