LƯU Ý:
Đây là trang component được sử dụng nội bộ bởi Wiki SCP-VN. Trang này được tạo để sử dụng và thêm vào các trang khác.
What this is
A component that displays a given time and/or date in the reader's timezone.
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, this module will not appear. This is intentional! It will still be there for readers who need it.
Please note the following Daylight Savings Time exceptions: both "EST" and "EDT", when entered into this component, are converted to the America/New_York timezone, which is then converted to either EST or EDT depending on the time of year. "BST" is converted to Europe/London, which is then converted to either GMT or BST depending on the time of year. To avoid this confusion, please avoid using timezones that vary depending on DST! Use a static timezone like UTC.
Usage
On any wiki:
[[include :scp-vn:component:tz
| time=18:00
| tz=UTC
]]
A setting in italics is optional. Everything else you gotta have. If you omit an optional setting, then it will have its default value. If you omit a non-optional setting, then don't expect the component to work properly.
To omit a setting, leave it out completely.
Codebase
HTML structure of the converter
Unfortunately this is buried in the source code - you'll have to go digging for it!
JS to operate the converter
document.addEventListener("DOMContentLoaded", function() { console.log(date); date = date === "{$date}" ? moment().format("Y-MM-DD") : date; console.log(date); tz = tz === "{$tz}" ? "UTC" : tz; tz = tz === "EST" ? "America/New_York" : tz; tz = tz === "EDT" ? "America/New_York" : tz; tz = tz === "BST" ? "Europe/London" : tz; given_time = moment.tz(date + " " + time, tz); tz = given_time.format("z"); text_before = text_before === "{$text_before}" ? "${time} ${tz} hay " : text_before; text_after = text_after === "{$text_after}" ? "." : text_after; // eval is used here to convert text strings to template literals // variables of the form ${var} will be parsed text_before = eval('`' + text_before + '`'); text_after = eval('`' + text_after + '`'); user_tz = Intl.DateTimeFormat().resolvedOptions().timeZone; converted_time = given_time.tz(user_tz); converted_time_tz = converted_time.format("HH:mm z"); console.log(given_time); console.log(converted_time); document.getElementById("text_before").textContent = text_before; document.getElementById("text_converted").textContent = converted_time_tz; document.getElementById("text_after").textContent = text_after; if (converted_time.format("z") === tz) { // e.g. displaying an EST time to an EST user - that's pointless! document.documentElement.style.display = 'none'; } });
CSS to style the output wrapper
.timezone-thingy { margin-top: -0.5rem; } .timezone-thingy iframe { border: none; max-height: 3.5rem; }
CSS to style the output internally
#wrapper { padding: 0.5rem !important; border: 1px solid #660000; border-radius: 10px; box-shadow: 0 2px 6px rgba(102,0,0,.5); background: white; margin: 0.5rem 0; display: inline-block; position: relative; left: 50%; transform: translateX(-50%); } #wrapper p { margin: 0; } #wrapper img { height: 1rem; vertical-align: text-top; }
