Page MenuHomeMusing Studio

Show post dates in local timezone
Closed, ResolvedPublic

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.

Revisions and Commits

Event Timeline

matt moved this task from Backlog to Soon / v1.0 on the WriteFreely board.
matt updated the task description. (Show Details)
matt added a project: Usability.

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.

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

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.

matt added a commit: Restricted Diffusion Commit.May 29 2020, 11:30 AM
matt added a commit: Restricted Diffusion Commit.