Timezone Converter

Link to article: Timezone Converter.

td { vertical-align: top; }
.options table.wiki-content-table td { border: none; padding: 0.7em 1em; }

```
border: 1px solid #ddd; padding: 1em;
```

:scp-wiki:component:croqstyle [info]

```
code
```
```
terminal
```
```
options
```
```
component-tz__wrapper
```
```
timezone-thingy
```
```
tz
```
```
tz__icons
```
```
tz__icon
```
```
tz__icon--world
```
```
tz__icon
```
```
tz__icon--clock
```
```
tz__text
```
```
tz__text
```
```
tz__text--error
```
```
code
```
```
tz
```
```
tz__icons
```
```
tz__icon
```
```
tz__icon--world
```
```
tz__icon
```
```
tz__icon--clock
```
```
tz__text
```
```
tz__text
```
```
tz__text--error
```

[[iftags +component]]

[[include :scp-wiki:component:croqstyle -=- ]]

[[module CSS]]
td { vertical-align: top; }
.options table.wiki-content-table td { border: none; padding: 0.7em 1em; }
[[/module]]

[[div style="border: 1px solid #ddd; padding: 1em;"]]
This is a component that displays a given time in the reader's timezone. It's designed for timed events e.g. contests, that might show a time like "4:00 PM EST" - not everyone is in the EST timezone and they would have to go look up when exactly that is.

The reader's timezone will be automatically calculated. All you need to do is input the timezone of the time you want on the page.

If your timezone matches the reader's timezone, you can show different text or make the component not appear at all.

[[=]]
[http://scp-sandbox-3.wikidot.com/demo:tz >>> DEMO <<<]
[[/=]]

+ Usage

On any wiki:

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-builtin)|include## ##var(--c-symbol)|:scp-wiki:component:tz##
##var(--c-keyword)||## ##var(--c-builtin)|time####var(--c-keyword)| = ####var(--c-string)|18:00##
##var(--c-keyword)||## ##var(--c-builtin)|tz####var(--c-keyword)| = ####var(--c-string)|EST##
##var(--c-keyword)||## ##var(--c-builtin)|text_if_tz_same####var(--c-keyword)| = ####var(--c-string)|Your timezone is EST.##
##var(--c-keyword)|]]##
[[/div]]

The following settings are supported. To get the default value of an optional setting, don't add the setting at all.

[[div class="options"]]
|| **time** || The time of the event in 24-hour time (e.g. 18:00). ||
|| **//tz//** _
//(Optional)// || The timezone of the time that you're entering. You can use [https://en.wikipedia.org/wiki/List_of_time_zone_abbreviations abbreviations] (e.g. UTC, GMT, EST) or [https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List location codes] (e.g. America/New_York, Europe/London). _
//Default value: UTC// ||
[!-- || **//date//** _
//(Optional)// || The date of the event in ISO format: YYYY-MM-DD. _
The date might be used at some point to calculate "time until" stuff, but right now it's unused. _
//Default value: today// || --]
|| **//text//** _
//(Optional)// || The text used to display the original time (that you provided) and the reader's local time. _
 _
The default text assumes that this component is placed beneath a time with some fixed timezone, but you can change the text to tweak the context as needed, e.g. by omitting the details for the original time. _
 _
//Default value: "${timeOriginal} ${tzOriginal} is ${timeLocal} ${tzLocal}."// ||
|| **//text_if_tz_same//** _
//(Optional)// || Text to show if the timezone is the same as the user's timezone. _
Default: nothing (the component will hide itself completely) ||
|| **//css//** _
//(Optional)// || CSS to style the interior of the component's iframe. To style the exterior, use a standard CSS module. _
 _
E.g. for use on a page with a dark theme, try {{.tz { color: white }}} ||
[[/div]]

Please note there is some built-in human-error correction for Daylight Saving Time:
* EST, EDT and ET are treated as America/New_York
* BST is treated as Europe/London

 _

See also:

* [[[component:countdown|]]]

[[/div]]

-----

[[/iftags]]

[[div_ class="component-tz__wrapper timezone-thingy"]]
[[html]]
<head>
  <script type="text/javascript">
    // These inputs are in the [[html]] block so that they get interpolated by component parametrisation. The ones in the local--code JS won't be.
    const inputs = {
      time: "{$time}",
      tz: "{$tz}",
      text: "{$text}",
      textSame: "{$text_if_tz_same}",
    }
  </script>
  <script src="https://scp-wiki.wdfiles.com/local--files/component%3Atz/moment.min.js"></script>
  <script src="https://scp-wiki.wdfiles.com/local--files/component%3Atz/moment-timezone-with-data-10-year-range.min.js"></script>
  <script src="https://scp-wiki.wdfiles.com/local--code/component%3Atz/1"></script>
  <link href="https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css" rel="stylesheet">
  <link href="https://scp-wiki.wikidot.com/local--code/component%3Atheme/1" rel="stylesheet">
  <style>
    .tz {
      display: flex;
      flex-direction: row;
      justify-content: center;
      line-height: 1;
      padding-block: 0.2em;
    }
    .tz__icons {
      display: flex;
      margin-right: 0.5ch;
    }
    .tz__icon {
      display: inline-block;
      height: 1em;
      width: 1em;
      mask-size: 100%;
      background: currentColor;
      mask-image: var(--mask);
    }
    .tz__icon--world {
      --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20a14.5 14.5 0 0 0 0-20M2 12h20'/%3E%3C/g%3E%3C/svg%3E");
    }
    .tz__icon--clock {
      --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/g%3E%3C/svg%3E");
    }
    .tz__text--error {
      color: red;
    }
  </style>
  <style>{$css}</style>
</head>
<body>
  <div class="tz">
    <span class="tz__icons">
      <span class="tz__icon tz__icon--world"></span>
      <span class="tz__icon tz__icon--clock"></span>
    </span>
    <span class="tz__text" id="display-text"></span>
    <span class="tz__text tz__text--error" id="error-message"></span>
  </div>
</body>
[[/html]]
[[/div]]

[[iftags +component]]
~~~~~

-----

+ Codebase

++ HTML structure of the converter

For the purposes of CSS styling, this is the structure of the contents of the iframe. Check the page source for all the details.

[[div class="code"]]
@@  <div class="tz">@@
@@    <span class="tz__icons">@@
@@      <span class="tz__icon tz__icon--world"></span>@@
@@      <span class="tz__icon tz__icon--clock"></span>@@
@@    </span>@@
@@    <span class="tz__text" id="display-text"></span>@@
@@    <span class="tz__text tz__text--error" id="error-message"></span>@@
@@  </div>@@
[[/div]]

++ JS to operate the converter
[[code type="javascript"]]
const ip = function toIncludeParameter([parameterName]) {
  return "{$" + parameterName + "}"
}

function throwUserError(errmsg) {
  document.getElementById("error-message").textContent = errmsg
  throw new Error(errmsg)
}

document.addEventListener("DOMContentLoaded", function() {
  // Handle required parameters
  if (inputs.time === ip`time`) {
    throwUserError("Missing required parameter: time")
  }

  // Set parameter default values
  if (inputs.tz === ip`tz`) {
    inputs.tz = "UTC"
  }
  if (inputs.text === ip`text`) {
    inputs.text = "${timeOriginal} ${tzOriginal} is ${timeLocal} ${tzLocal}."
  }

  // Override daylight savings timezones
  if (/^E[SD]?T$/.test(inputs.tz)) {
    inputs.tz = "America/New_York"
  }
  if (inputs.tz === "BST") {
    inputs.tz = "Europe/London"
  }

  const timeOriginal = inputs.time
  const date = new Date().toISOString().split("T")[0]
  const datetime = `${date} ${timeOriginal}`
  const momentOriginal = moment.tz(datetime, inputs.tz)
  const tzOriginal = momentOriginal.format("z")

  const momentLocal = momentOriginal.tz(moment.tz.guess())
  const timeLocal = momentLocal.format("LT")
  const tzLocal = momentLocal.format("z")

  let displayText = inputs.text
    .replace("${timeOriginal}", timeOriginal)
    .replace("${tzOriginal}", tzOriginal)
    .replace("${timeLocal}", timeLocal)
    .replace("${tzLocal}", tzLocal)

  console.log(
    "component:tz",
    { timeOriginal, tzOriginal, tzLocal, timeLocal, displayText }
  )

  if (tzLocal === tzOriginal) {
    if (inputs.textSame === ip`text_if_tz_same`) {
      document.documentElement.style.display = 'none'
      return
    }
    displayText = inputs.textSame
  }

  document.getElementById("display-text").textContent = displayText
});
[[/code]]

[[/iftags]]

Timezone Converter

Module Styles

Inline Styles

Includes

CSS Classes

Page Source