نام های نمایشی بومی سازی شده

const supportedCal = Intl.supportedValuesOf("calendar");
console.log(supportedCal);
// خروجی: ['buddhist', 'chinese', 'coptic', 'dangi', ...]

<select id="lang"></select>
<select id="calendar"></select>
<fieldset></fieldset>
<output id="output"></output>

const langSelect = document.getElementById("lang");
const calSelect = document.getElementById("calendar");
const fieldset = document.querySelector("fieldset");
const output = document.getElementById("output");

// چند نمونه لوکال برای منوی انتخاب زبان
const langs = [
  "en-US", "zh-Hans-CN", "ja-JP", "ar-EG", "ru-RU", 
  "es-ES", "fr-FR", "de-DE", "hi-IN", "pt-BR", "bn-BD", "he-IL"
];

// دریافت تمام تقویم‌های پشتیبانی‌شده مرورگر
const calendars = Intl.supportedValuesOf("calendar");

// ۱. پر کردن منوی انتخاب زبان با نام بومی هر زبان
for (const lang of langs) {
  const option = document.createElement("option");
  option.value = lang;
  // نام هر زبان را به همان زبان خودش تولید می‌کند (مثلاً English، العربية و...)
  option.textContent = new Intl.DisplayNames(lang, { type: "language" }).of(lang);
  langSelect.appendChild(option);
}

// ۲. رندر کردن منوی انتخاب تقویم بر اساس زبان انتخاب‌شده
function renderCalSelect() {
  const lang = langSelect.value;
  calSelect.innerHTML = "";
  
  const dn = new Intl.DisplayNames(lang, { type: "calendar" });
  
  // دریافت تقویم‌های ترجیحی آن لوکال (در صورت پشتیبانی مرورگر)
  const preferredCalendars = new Intl.Locale(lang).getCalendars?.() ?? ["gregory"];
  
  // مرتب‌سازی لیست تقویم‌ها به طوری که تقویم‌های ترجیحی لوکال در ابتدا قرار بگیرند
  const sortedCalendars = [
    ...preferredCalendars,
    ...calendars.filter((c) => !preferredCalendars.includes(c)),
  ];

  for (const cal of sortedCalendars) {
    const option = document.createElement("option");
    option.value = cal;
    option.textContent = dn.of(cal); // ترجمه نام تقویم به زبان انتخابی
    calSelect.appendChild(option);
  }
}

// ۳. نمایش زمان زنده با برچسب‌های بومی‌سازی‌شده برای هر جزء
function renderTime() {
  const lang = langSelect.value;
  const cal = calSelect.value;
  
  const df = new Intl.DateTimeFormat(lang, {
    calendar: cal,
    dateStyle: "full",
    timeStyle: "full",
  });
  
  const now = new Date();
  const dn = new Intl.DisplayNames(lang, { type: "dateTimeField" });
  output.innerHTML = "";
  
  // تجزیه زمان به تکه‌های مختلف و قرار دادن نام فیلد (مثل Month) بالای هر تکه
  for (const component of df.formatToParts(now)) {
    const text = document.createElement("span");
    text.textContent = component.value;
    
    // اگر تکه فعلی جزو اجزای اصلی زمان نبود (مثل فاصله‌ها یا ویرگول)، مستقیم اضافه‌اش کن
    if (![
      "era", "year", "quarter", "month", "weekOfYear", 
      "weekday", "day", "dayPeriod", "hour", "minute", "second", "timeZoneName"
    ].includes(component.type)) {
      output.appendChild(text);
      continue;
    }
    
    // دریافت نام بومی آن فیلد (مثلاً کلمه "day" در عربی می‌شود "اليوم")
    const title = dn.of(component.type);
    
    // استفاده از تگ ruby برای نمایش عنوان بالای متن اصلی
    const field = document.createElement("ruby");
    field.appendChild(text);
    const rt = document.createElement("rt");
    rt.textContent = title;
    field.appendChild(rt);
    
    output.appendChild(field);
  }
}

// مقداردهی اولیه دمو
renderCalSelect();
renderTime();

// گوش دادن به رویداد تغییر زبان و تقویم
langSelect.addEventListener("change", () => {
  renderCalSelect();
  renderTime();
});
calSelect.addEventListener("change", renderTime);

// بروزرسانی زمان در هر نیم ثانیه
setInterval(renderTime, 500);