Fifteen languages

<div class="demo">
  <div class="demo-langs" role="group" aria-label="Language">
    <button type="button" data-lang="en-GB" aria-pressed="true">English</button>
    <button type="button" data-lang="ar-EG">العربية</button>
    <button type="button" data-lang="ur-PK">اردو</button>
    <button type="button" data-lang="fr-FR">Français</button>
    <button type="button" data-lang="de-DE">Deutsch</button>
    <button type="button" data-lang="es-ES">Español</button>
    <button type="button" data-lang="pt-BR">Português</button>
    <button type="button" data-lang="it-IT">Italiano</button>
    <button type="button" data-lang="nl-NL">Nederlands</button>
    <button type="button" data-lang="tr-TR">Türkçe</button>
    <button type="button" data-lang="ru-RU">Русский</button>
    <button type="button" data-lang="pl-PL">Polski</button>
    <button type="button" data-lang="hi-IN">हिन्दी</button>
    <button type="button" data-lang="id-ID">Indonesia</button>
    <button type="button" data-lang="zh-CN">中文</button>
    <button type="button" data-lang="ja-JP">日本語</button>
  </div>

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

  <p class="demo-hint">Open it: the presets, the footer and the count of nights are all in the same language. <code id="out">—</code></p>
</div>

import { createDateRangePicker } from 'https://devix.pk/cdn/oss/date-picker@1.2.0/index.js';
import { registerAll } from 'https://devix.pk/cdn/oss/date-picker@1.2.0/locales.js';

// One call, and every locale below is translated. A bundler that only needs one
// imports one instead: `import { ar } from '@devix-labs/date-picker/locales'`.
registerAll();

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

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

  // Right-to-left is the document's business, not the widget's: the panel
  // follows the direction of the field it belongs to.
  const rtl = /^(ar|ur|fa|he)\b/.test(locale);
  holder.dir = rtl ? 'rtl' : 'ltr';
  holder.lang = locale;

  picker = createDateRangePicker(document.getElementById('stay'), {
    locale,
    start: '2026-09-14',
    end: '2026-09-20',
    presets: ['today', 'last7', 'last30', 'thisMonth', 'next7'],
    onChange: (range) => (out.textContent = range.start && range.end ? `${range.start} → ${range.end}` : '—'),
  });
}

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);
});

show('en-GB');

@import url('https://devix.pk/cdn/oss/date-picker@1.2.0/date-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; }