retime.js

/**
 * 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] + ")";
}