Last active
July 11, 2017 17:59
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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> | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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