Page MenuHomewrite.as

Show post dates in local timezone
Open, NormalPublic

Description

Overview

Dates should show the published date as it is in the reader's timezone.

Background

All dates are currently shown in UTC, which can be confusing to people.

Implementation

Include the UTC date by default in the HTML of the page generated by the server. Then use Javascript to get the reader's timezone and convert the date to whatever it is in that user's timezone.

Note that we support date formats in many different languages and locales on the server-side. We should seamlessly carry this over to the client-side -- i.e., "2019年7月20日" should not become "July 20, 2019" with this change. One way to support this might be to also supply a map of langs to dates, e.g. generating JS like this:

"2019-07-19": {
  "zh": "2019年7月19日"
},
"2019-07-20": {
  "zh": "2019年7月20日"
},
"2019-07-21": {
  "zh": "2019年7月21日",
}

Remember, instead of getting fancy with number replacement, it might be worth keeping maps of the full formats for yesterday, today, and tomorrow, because e.g. tomorrow could be August 1, which would be a different word from "July" in any given language.

Event Timeline

matt created this task.Jul 21 2019, 3:28 AM
matt moved this task from Far Future to Soon / v1.0 on the WriteFreely board.
matt updated the task description. (Show Details)
matt assigned this task to robjloranger.

This is another small one that'll be a nice usability improvement.


Here's the JS I'm currently using on Submit.as (feel free to improve):

function toLocalDate(el) {
    var d = new Date(el.getAttribute("datetime"));
    el.textContent = d.toLocaleDateString(navigator.language || "en-US", { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' });
}

var $dates = document.querySelectorAll("date");
for (var i=0; i < $dates.length; i++) {
    toLocalDate($dates[i]);
}

This uses the datetime attribute of all <date> elements on a page to display the correct date in local time. We should make sure the server generates a valid datetime string so that new Date() parsing works across all browsers.

matt moved this task from Improvements to Minor Issues on the Usability board.Wed, Oct 2, 5:13 PM

So this seems to work well with only the script provided. Where were the uses of yesterday, today and tomorrow?

matt added a comment.Thu, Oct 3, 4:39 PM

Yeah, just the script in that comment should be enough. I think the yesterday, today and tomorrow thing was in case we had those maps of dates to local translations -- so you can disregard.