Fifteen languages

<div class="demo">
  <div class="demo-langs" role="group" aria-label="Language">
    <button type="button" data-lang="en-GB" data-word="noon" aria-pressed="true">English</button>
    <button type="button" data-lang="ar-EG" data-word="منتصف الليل">العربية</button>
    <button type="button" data-lang="ur-PK" data-word="دوپہر">اردو</button>
    <button type="button" data-lang="fr-FR" data-word="midi">Français</button>
    <button type="button" data-lang="de-DE" data-word="mitternacht">Deutsch</button>
    <button type="button" data-lang="es-ES" data-word="mediodía">Español</button>
    <button type="button" data-lang="pt-BR" data-word="meio-dia">Português</button>
    <button type="button" data-lang="it-IT" data-word="mezzogiorno">Italiano</button>
    <button type="button" data-lang="nl-NL" data-word="middernacht">Nederlands</button>
    <button type="button" data-lang="tr-TR" data-word="öğlen">Türkçe</button>
    <button type="button" data-lang="ru-RU" data-word="полдень">Русский</button>
    <button type="button" data-lang="pl-PL" data-word="południe">Polski</button>
    <button type="button" data-lang="hi-IN" data-word="दोपहर">हिन्दी</button>
    <button type="button" data-lang="id-ID" data-word="tengah malam">Indonesia</button>
    <button type="button" data-lang="zh-CN" data-word="中午">中文</button>
    <button type="button" data-lang="ja-JP" data-word="正午">日本語</button>
  </div>

  <div class="demo-field" id="holder">
    <label class="demo-label" for="at">Appointment</label>
    <input id="at" name="at" class="demo-input">
  </div>

  <p class="demo-hint">
    Type <code id="word">noon</code> into the field — the words are part of the language, not just the labels.
    Value: <code id="out">—</code>
  </p>
</div>

import { createTimePicker } from 'https://devix.pk/cdn/oss/time-picker@1.1.0/index.js';
import { registerAll } from 'https://devix.pk/cdn/oss/time-picker@1.1.0/locales.js';

// One call, and every locale below is translated — including the words a person
// can type instead of a number.
registerAll();

const holder = document.getElementById('holder');
const out = document.getElementById('out');
const word = document.getElementById('word');
let picker = null;

function show(locale, typeable) {
  picker?.destroy();

  const rtl = /^(ar|ur|fa|he)\b/.test(locale);
  holder.dir = rtl ? 'rtl' : 'ltr';
  holder.lang = locale;
  word.textContent = typeable;

  picker = createTimePicker(document.getElementById('at'), {
    locale,
    step: 30,
    min: '08:00',
    max: '20:00',
    onChange: (value) => (out.textContent = value ?? '—'),
  });
}

document.querySelector('.demo-langs').addEventListener('click', (event) => {
  const button = event.target.closest('[data-lang]');
  if (!button) return;
  for (const other of document.querySelectorAll('.demo-langs button')) {
    other.setAttribute('aria-pressed', String(other === button));
  }
  show(button.dataset.lang, button.dataset.word);
});

show('en-GB', 'noon');

@import url('https://devix.pk/cdn/oss/time-picker@1.1.0/time-picker.min.css');

.demo-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.demo-langs button {
  padding: 5px 10px;
  border: 1px solid var(--demo-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.demo-langs button[aria-pressed='true'] { border-color: transparent; background: var(--demo-accent); color: #fff; }