Created
December 8, 2023 07:45
-
-
Save LemmaEOF/1cbfc74d8300b7c656bf6e8d7e6e757f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Lemma's Fancy Vanilla.js Date-Time Formatting Script! | |
* I'm actually pretty proud of this since I'm not a JS programmer lmao | |
* | |
* Available under MIT if you want to use this on your site! | |
* | |
* How to use: | |
* 1. Add this script to your HTML as a file marked defer | |
* 2. Create a <time> element somewhere in your code | |
* 3. Set the `datetime` property to be the ISO-8601 time code you want to use! | |
* 4. Your time will be automatically formatted for everyone who visits the site! :tada: | |
* 5. If you set `datestyle` or `timestyle` attributes on the tag, they'll be applied automatically! | |
* | |
* Technical details to note: | |
* - As-is, this formats in short date and time style. Feel free to change them as you see fit! | |
* - This uses `navigator.language`, which may not always update for the current lang the user has picked. | |
* | |
* For legal values in `default_options`, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters | |
* | |
* Enjoy! | |
*/ | |
const default_options = { dateStyle: "short", timeStyle: "short" }; //Edit me for default config! | |
const timestamps = document.querySelectorAll("time"); | |
for (const elem in timestamps) { | |
const date = new Date(elem.getAttribute("datetime")); | |
let options = { | |
...default_options | |
}; | |
if (elem.hasAttribute("datestyle")) { | |
val = elem.getAttribute("datestyle"); | |
if (val == "none") { | |
options.dateStyle = undefined; | |
} else { | |
options["dateStyle"] = val; | |
} | |
} | |
if (elem.hasAttribute("timestyle")) { | |
val = elem.getAttribute("timestyle"); | |
if (val == "none") { | |
options.timeStyle = undefined; | |
} else { | |
options["timeStyle"] = val; | |
} | |
} | |
elem.innerHTML = date.toLocaleString(navigator.language, options); | |
} | |
//automatically mark localization! | |
const timezones = document.querySelectorAll(".timezone"); | |
for (const elem in timezones) { | |
//Hi! This sucks! | |
//We mark the user's local time zone to make it clear which one it refers to, | |
//But there's no good way to actually get that directly with vanilla JS, | |
//So I'm stuck doing this kludge-y mess to get the user's timezone code instead. | |
//Thanks, JavaScript! What a good and useful language with many helpful APIs and no dependency problems whatsoever! | |
elem.innerHTML = "(" + new Date().toLocaleTimeString("en-US", { timeZoneName: 'short' }).split(' ')[2] + ")"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment