JSFiddle - React, Tailwind, and code Playground

by sewatech

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<body onload="init()">
    <div>
        <select id="language" onChange="languageChanged()">
            <option value="en">English</option>
            <option value="fr">Français</option>
            <option value="de">Deutch</option>
        </select>
        <select id="region" onChange="regionChanged()">
            <option value="">-</option>
        </select>
    </div>

    <table>
        <tr>
            <td>
                <span>ISO</span>
            </td>
            <td>
                <span id="iso"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Short</span>
            </td>
            <td>
                <span id="short"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Medium</span>
            </td>
            <td>
                <span id="medium"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Long</span>
            </td>
            <td>
                <span id="long"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Hour</span>
            </td>
            <td>
                <span id="hour"></span>
            </td>
        </tr>
    </table>
    <button onclick="defineEnUsLanguage()">Define en-us</button>
</body>

CSS

body {
  font-family: Helvetica, Arial, sans-serif !important;
  color: #333;
}

select {
  font-size: 1.2em;
  margin-bottom: 1em;
  padding: 0.2em 1em 0.2em 0.2em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
  background-position: 100% center;
  background-repeat: no-repeat;
  border: solid 1px #cccccc;
  appearance: none !important;
  color: #333;
}

button {
  font-size: 1em;
  margin-top: 0.8em; 
  padding: 0.5em 1em;
  border: solid 0 #007095;
  cursor: pointer;
  background-color: #008CBA;
  color: #FFFFFF;
}
button:hover {
  background-color: #007095;
}

table {
 border-collapse: collapse;
}
table td {
 border: solid 1px #ccc;
 padding: 0.2em 2em 0.2em 0.2em;
}
table tr:nth-of-type(2n) {
  background-color: #F9F9F9;
}

JavaScript

function init() {
    //defineEnUsLanguage();

    languageChanged();
}

function defineEnUsLanguage() {
    moment.defineLocale('en-us', {parentLocale:'en'});
    moment.updateLocale('en', {...moment.localeData('en-gb')._config, abbr: 'en'});
    languageChanged();
}

function languageChanged() {
    const languageSelect = document.getElementById('language')

    const regionSelect = document.getElementById('region')
    regionSelect.innerText = null;
    moment.locales()
        .filter(locale => locale.substring(0, 2) === languageSelect.value)
        .sort()
        .forEach(locale => {
            regionSelect[regionSelect.length] = new Option(locale, locale);
        });

    regionChanged();
}

function regionChanged() {
    const regionSelect = document.getElementById('region')
    moment.locale(regionSelect.value);

    displayAll();
}

function displayAll() {
    display('iso', '', str => str.substring(0, 10));
    display('short', 'L');
    display('medium', 'll');
    display('long', 'dddd LL');
    display('hour', 'LT');
}

function display(elementId, format, transform = str => str) {
    const span = document.getElementById(elementId);
    span.textContent = transform(moment('2000-12-31').format(format));
}