Userscript to convert the timezone of times shown on a web page?

Question

Is it possible to convert time zones in Tampermonkey for Chrome?

I have a given date on a website inside a table/td element. EG:

<td align="center">8:00 PM ET</td>

I want to change ET/EST to my timezone (CET). EG:

<td align="center">2:00 AM CET</td>

How can a script do this?

Answer 1

To convert timezones you need to:

1. Fetch the correct nodes and/or table cells.
2. Parse the contents for whatever date/time format is used.
3. Convert the value, reformat it, and update the page with the new value.

---

Fetch the correct nodes:

To get the nodes, use something like waitForKeyElements(). It uses flexible jQuery selectors ^{(EG: "td:contains('M ET')")} and works on both static and dynamic pages.

Read: how to choose good selectors. The question does not provide enough information to choose a good selector.

Parse the date/time text:

Parsing times (and dates) is tricky because of the myriad of formats used, the ever shifting timezones, and "saving time" meddling.
For that reason, use a library that is expert in time/date formatting and conversion.
I recommend the Moment Timezone library for most stuff like this. See the code below.

Convert and update the date/time:

Converting is handled by the same library (Moment Timezone). Updating the page is done with jQuery's .text() in this instance.

Complete, working Tampermonkey script ^{_{(Just the first gray block)}}:

// ==UserScript==
// @name     _Convert displayed times from one timezone to another
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @require  https://momentjs.com/downloads/moment.min.js
// @require  https://momentjs.com/downloads/moment-timezone-with-data-2012-2022.min.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

const pagesTimezone     = "America/New_York";   // Old style = EST/EDT
const desiredTimezone   = "Europe/Luxembourg";  // Old style = CET

//-- You need to provide a more selective selector.
waitForKeyElements ("td:contains('M ET')", convertTimezone); // installed script line

function convertTimezone (jNode) {
    var timeStr     = jNode.text ().trim ();  // expected like "8:00 PM ET"
    var origTime    = moment.tz (timeStr, "hh:mm a", pagesTimezone);
    var localTime   = origTime.tz (desiredTimezone).format ("h:mm A z");

    jNode.text (localTime);
}

/*--------------------------------------*/
/*--- Simulated target page follows: ---*/
/*--------------------------------------*/
table {border-collapse: collapse;  border: 1px solid gray;}
td {padding: 0.5ex 1em;  text-align: right;  border: 1px solid gray;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js"></script>
<script src="//momentjs.com/downloads/moment.min.js"></script>
<script src="//momentjs.com/downloads/moment-timezone-with-data-2012-2022.min.js"></script>
<table>
  <caption>Some times (EST/EDT)</caption>
  <tr><td>12:01 AM ET</td><td> 2:02 AM ET</td><td> 4:03 AM ET</td><td> 6:04 AM ET</td></tr>
  <tr><td> 8:05 AM ET</td><td>10:06 AM ET</td><td>12:07 PM ET</td><td> 2:08 PM ET</td></tr>
  <tr><td> 4:09 PM ET</td><td> 6:10 PM ET</td><td> 8:11 PM ET</td><td>10:12 PM ET</td></tr>
</table>

Notes:

1. See the Moment parsing docs for an explanation of the format specifiers used in the .tz() calls.
2. See the docs for parsing the timezone.
3. See a list of timezone identifiers to pick the one(s) best suited to your purposes.