Obtenir la liste des systèmes de calendrier disponibles

Découvrez quels systèmes de calendrier sont pris en charge par votre environnement JavaScript

Introduction

Lors de la création d'applications pour un public mondial, les utilisateurs ont souvent besoin de visualiser les dates dans leur système de calendrier préféré. Bien que vous soyez probablement familier avec le calendrier grégorien utilisé dans la plupart des pays occidentaux, de nombreuses cultures utilisent des systèmes de calendrier entièrement différents comme le calendrier islamique Hijri, le calendrier hébraïque ou le calendrier bouddhiste.

Pour permettre aux utilisateurs de sélectionner leur calendrier préféré, vous devez connaître les systèmes de calendrier pris en charge par l'environnement JavaScript. Plutôt que de maintenir une liste codée en dur qui devient obsolète ou inclut des valeurs non prises en charge, JavaScript fournit une méthode pour découvrir les systèmes de calendrier disponibles à l'exécution.

La méthode Intl.supportedValuesOf() avec le paramètre "calendar" renvoie un tableau de tous les identifiants de systèmes de calendrier pris en charge par l'environnement actuel. Cela garantit que votre application n'offre que des options de calendrier qui fonctionnent correctement.

Ce que sont les systèmes de calendrier

Les systèmes de calendrier sont différentes méthodes d'organisation et de comptage du temps. Bien que tous les calendriers suivent les jours, les mois et les années, ils utilisent des règles différentes pour calculer quand commence une année, combien de temps durent les mois et comment tenir compte des cycles astronomiques.

Le calendrier grégorien, introduit en 1582, est le calendrier civil le plus largement utilisé. Il utilise une année solaire d'environ 365,25 jours, divisée en 12 mois, avec des années bissextiles ajoutées tous les quatre ans (avec des exceptions pour les années séculaires).

D'autres systèmes de calendrier suivent des règles différentes. Le calendrier islamique est purement lunaire, avec des mois qui suivent les phases de la lune. Cela signifie que l'année islamique est environ 11 jours plus courte qu'une année solaire, ce qui fait que les dates islamiques se déplacent à travers les saisons au fil du temps. Les calendriers hébraïque et chinois sont luni-solaires, combinant des mois lunaires avec des ajustements pour maintenir le calendrier synchronisé avec l'année solaire.

Lorsque vous formatez des dates en JavaScript, le système de calendrier détermine quels numéros d'année, de mois et de jour apparaissent. Le même moment dans le temps a différentes représentations de date dans différents systèmes de calendrier.

Utilisation de Intl.supportedValuesOf pour obtenir les systèmes de calendrier

La méthode Intl.supportedValuesOf() accepte un paramètre de type chaîne de caractères spécifiant quel type de valeurs retourner. Pour obtenir les systèmes de calendrier, passez "calendar":

const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Résultat: ["buddhist", "chinese", "coptic", "dangi", "ethioaa",
//          "ethiopic", "gregory", "hebrew", "indian", "islamic",
//          "islamic-civil", "islamic-rgsa", "islamic-tbla",
//          "islamic-umalqura", "iso8601", "japanese", "persian", "roc"]

La méthode renvoie un tableau de chaînes de caractères représentant les identifiants de calendrier. Ces identifiants suivent la norme Unicode CLDR (Common Locale Data Repository), qui fournit une façon cohérente de référencer les systèmes de calendrier sur différentes plateformes et langages de programmation.

Le tableau retourné présente ces caractéristiques:

  • Les valeurs sont triées par ordre alphabétique croissant
  • Les valeurs en double sont supprimées
  • Chaque identifiant utilise des lettres minuscules et des traits d'union
  • La liste inclut tous les systèmes de calendrier pris en charge par l'implémentation JavaScript

Différents navigateurs et environnements JavaScript prennent en charge différents ensembles de calendriers, bien que tous les navigateurs modernes prennent en charge un ensemble de base de calendriers communs.

Comprendre les identifiants de calendrier

Chaque identifiant de calendrier représente un système de calendrier spécifique utilisé par une ou plusieurs cultures. Voici les identifiants les plus courants:

L'identifiant "gregory" représente le calendrier grégorien, le calendrier civil standard utilisé dans la plupart des pays. C'est le calendrier que vous utilisez dans la vie quotidienne si vous vivez aux États-Unis, en Europe ou dans la plupart des autres régions du monde.

L'identifiant "buddhist" représente le calendrier bouddhiste thaïlandais, qui utilise la même structure de mois et de jours que le calendrier grégorien mais compte les années à partir de la naissance de Bouddha (543 av. J.-C. dans le calendrier grégorien). L'année 2025 dans le calendrier grégorien correspond à l'année 2568 dans le calendrier bouddhiste.

L'identifiant "chinese" représente le calendrier chinois traditionnel, un calendrier luni-solaire où les mois suivent les phases de la lune et les années s'alignent sur la période orbitale de Jupiter. Le calendrier chinois est utilisé pour déterminer les fêtes traditionnelles comme le Nouvel An chinois.

L'identifiant "islamic" représente le calendrier islamique Hijri, un calendrier purement lunaire avec 12 mois de 29 ou 30 jours. Les années sont comptées à partir de l'Hégire, lorsque Mahomet a migré de La Mecque à Médine en 622 de notre ère.

L'identifiant "hebrew" représente le calendrier hébraïque, un calendrier luni-solaire utilisé pour les observances religieuses juives. Il compte les années à partir d'une date de création traditionnelle (3761 av. J.-C. dans le calendrier grégorien).

L'identifiant "japanese" représente le calendrier japonais, qui utilise la même structure de mois et de jours que le calendrier grégorien mais divise le temps en ères basées sur l'empereur régnant. L'ère actuelle est Reiwa, qui a commencé en 2019.

L'identifiant "persian" représente le calendrier solaire Hijri utilisé en Iran et en Afghanistan. C'est un calendrier solaire avec des années comptées à partir de l'Hégire, ce qui le différencie du calendrier lunaire islamique.

D'autres identifiants incluent "coptic" (calendrier copte orthodoxe), "dangi" (calendrier traditionnel coréen), "ethiopic" (calendrier éthiopien), "indian" (calendrier national indien) et "roc" (calendrier de la République de Chine utilisé à Taïwan).

Certains identifiants ont des variantes comme "islamic-civil", "islamic-rgsa", "islamic-tbla" et "islamic-umalqura", qui représentent différentes méthodes de calcul pour le calendrier islamique.

L'identifiant "iso8601" représente le calendrier ISO 8601, qui est essentiellement le calendrier grégorien mais utilise toujours le calendrier grégorien proleptique (extension du calendrier grégorien vers l'arrière avant son introduction en 1582).

Observer les systèmes de calendrier en action

Pour comprendre comment les systèmes de calendrier affectent le formatage des dates, formatons la même date en utilisant différents calendriers :

const date = new Date("2025-10-15");

const gregorian = new Intl.DateTimeFormat("en-US", {
  calendar: "gregory",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const islamic = new Intl.DateTimeFormat("en-US", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const hebrew = new Intl.DateTimeFormat("en-US", {
  calendar: "hebrew",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const buddhist = new Intl.DateTimeFormat("en-US", {
  calendar: "buddhist",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(gregorian.format(date));
// Output: "October 15, 2025"

console.log(islamic.format(date));
// Output: "Rabi' II 16, 1447 AH"

console.log(hebrew.format(date));
// Output: "Tishrei 23, 5786"

console.log(buddhist.format(date));
// Output: "October 15, 2568 BE"

Le même objet JavaScript Date représente le même moment dans le temps, mais chaque système de calendrier exprime ce moment avec différentes valeurs d'année, de mois et de jour. La date grégorienne du 15 octobre 2025 correspond au 16 Rabi' II 1447 dans le calendrier islamique, au 23 Tishrei 5786 dans le calendrier hébraïque, et au 15 octobre 2568 dans le calendrier bouddhiste.

Cela démontre pourquoi il est nécessaire de spécifier quel système de calendrier utiliser lors du formatage des dates pour les utilisateurs qui suivent différents calendriers.

Construire un sélecteur de calendrier

Lors de la création d'interfaces utilisateur permettant aux utilisateurs de choisir leur calendrier préféré, interrogez les calendriers disponibles et construisez un sélecteur de manière dynamique :

function buildCalendarSelector() {
  const calendars = Intl.supportedValuesOf("calendar");
  const select = document.createElement("select");
  select.id = "calendar-selector";

  calendars.forEach(calendar => {
    const option = document.createElement("option");
    option.value = calendar;
    option.textContent = calendar;
    select.appendChild(option);
  });

  return select;
}

const selector = buildCalendarSelector();
document.body.appendChild(selector);

Cela crée un menu déroulant contenant tous les calendriers pris en charge. Cependant, les identifiants techniques comme "gregory" et "islamic" ne sont pas conviviaux. Les utilisateurs ont besoin de voir des noms descriptifs dans leur propre langue.

Affichage des noms de calendriers lisibles par l'humain

L'API Intl.DisplayNames convertit les identifiants de calendrier en noms lisibles par l'humain. Utilisez-la pour créer un meilleur sélecteur de calendrier :

function buildCalendarSelector(locale = "en-US") {
  const calendars = Intl.supportedValuesOf("calendar");
  const displayNames = new Intl.DisplayNames([locale], { type: "calendar" });

  const select = document.createElement("select");
  select.id = "calendar-selector";

  calendars.forEach(calendar => {
    const option = document.createElement("option");
    option.value = calendar;
    option.textContent = displayNames.of(calendar);
    select.appendChild(option);
  });

  return select;
}

const selector = buildCalendarSelector("en-US");
document.body.appendChild(selector);

Maintenant, le menu déroulant affiche des noms comme "Gregorian Calendar", "Islamic Calendar" et "Hebrew Calendar" au lieu d'identifiants techniques.

Vous pouvez afficher les noms de calendriers dans différentes langues en changeant la locale :

const calendars = ["gregory", "islamic", "hebrew", "buddhist", "chinese"];

const englishNames = new Intl.DisplayNames(["en-US"], { type: "calendar" });
const frenchNames = new Intl.DisplayNames(["fr-FR"], { type: "calendar" });
const arabicNames = new Intl.DisplayNames(["ar-SA"], { type: "calendar" });

calendars.forEach(calendar => {
  console.log(`${calendar}:`);
  console.log(`  English: ${englishNames.of(calendar)}`);
  console.log(`  French: ${frenchNames.of(calendar)}`);
  console.log(`  Arabic: ${arabicNames.of(calendar)}`);
});

// Output:
// gregory:
//   English: Gregorian Calendar
//   French: calendrier grégorien
//   Arabic: التقويم الميلادي
// islamic:
//   English: Islamic Calendar
//   French: calendrier musulman
//   Arabic: التقويم الهجري
// ...

Cela permet aux utilisateurs de voir les noms des calendriers dans leur langue préférée.

Vérifier si un calendrier spécifique est pris en charge

Avant d'utiliser un calendrier dans votre application, vérifiez si l'environnement JavaScript le prend en charge. Cela évite les erreurs d'exécution et vous permet d'implémenter un comportement de repli :

function isCalendarSupported(calendar) {
  const supported = Intl.supportedValuesOf("calendar");
  return supported.includes(calendar);
}

if (isCalendarSupported("islamic")) {
  const formatter = new Intl.DateTimeFormat("en-US", {
    calendar: "islamic",
    year: "numeric",
    month: "long",
    day: "numeric"
  });
  console.log(formatter.format(new Date()));
} else {
  console.log("Islamic calendar is not supported");
}

Ce modèle fonctionne pour n'importe quel identifiant de calendrier. Vous pouvez l'utiliser pour afficher ou masquer les options de calendrier dans votre interface utilisateur, ou pour revenir à un calendrier par défaut lorsque celui préféré n'est pas disponible.

Création d'une fonction réutilisable de détection de fonctionnalités

Construisez une fonction générique pour vérifier la prise en charge des calendriers et gérer élégamment les calendriers manquants :

function getCalendarOrFallback(preferredCalendar, fallbackCalendar = "gregory") {
  const supported = Intl.supportedValuesOf("calendar");

  if (supported.includes(preferredCalendar)) {
    return preferredCalendar;
  }

  if (supported.includes(fallbackCalendar)) {
    return fallbackCalendar;
  }

  return supported[0];
}

const calendar = getCalendarOrFallback("islamic", "gregory");
const formatter = new Intl.DateTimeFormat("en-US", {
  calendar,
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(formatter.format(new Date()));

Cette fonction essaie d'utiliser le calendrier préféré, se replie sur le calendrier de secours spécifié si le préféré n'est pas disponible, et renvoie finalement le premier calendrier disponible si les deux ne sont pas pris en charge.

Filtrage des calendriers pour votre application

La plupart des applications n'ont pas besoin de prendre en charge tous les systèmes de calendrier. Filtrez la liste pour n'inclure que les calendriers pertinents pour vos utilisateurs :

function getRelevantCalendars(allowedCalendars) {
  const supported = Intl.supportedValuesOf("calendar");
  return allowedCalendars.filter(calendar => supported.includes(calendar));
}

const allowedCalendars = ["gregory", "islamic", "hebrew", "buddhist"];
const availableCalendars = getRelevantCalendars(allowedCalendars);

console.log(availableCalendars);
// Sortie : ["gregory", "islamic", "hebrew", "buddhist"]
// (en supposant que tous sont pris en charge dans l'environnement actuel)

Cela garantit que vous ne proposez que des calendriers qui répondent à vos exigences et fonctionnent dans le navigateur de l'utilisateur.

Vous pouvez combiner cela avec la sélection de calendrier pour créer une interface utilisateur ciblée :

function buildFilteredCalendarSelector(allowedCalendars, locale = "en-US") {
  const supported = Intl.supportedValuesOf("calendar");
  const available = allowedCalendars.filter(cal => supported.includes(cal));
  const displayNames = new Intl.DisplayNames([locale], { type: "calendar" });

  const select = document.createElement("select");

  available.forEach(calendar => {
    const option = document.createElement("option");
    option.value = calendar;
    option.textContent = displayNames.of(calendar);
    select.appendChild(option);
  });

  return select;
}

const selector = buildFilteredCalendarSelector(
  ["gregory", "islamic", "hebrew", "buddhist"],
  "en-US"
);
document.body.appendChild(selector);

Cela crée un sélecteur affichant uniquement les calendriers que vous souhaitez prendre en charge, avec des noms lisibles par l'humain, garantis de fonctionner dans l'environnement actuel.

Regroupement des calendriers par catégorie

Pour les applications qui prennent en charge de nombreux calendriers, regroupez-les par type ou par région pour améliorer l'utilisabilité :

function groupCalendars() {
  const calendars = Intl.supportedValuesOf("calendar");

  const groups = {
    solar: ["gregory", "iso8601", "persian", "ethiopic", "coptic"],
    lunar: ["islamic", "islamic-civil", "islamic-rgsa", "islamic-tbla", "islamic-umalqura"],
    lunisolar: ["hebrew", "chinese", "dangi"],
    erasBased: ["japanese", "roc", "buddhist"],
    other: []
  };

  const grouped = {
    solar: [],
    lunar: [],
    lunisolar: [],
    erasBased: [],
    other: []
  };

  calendars.forEach(calendar => {
    let placed = false;

    for (const [group, members] of Object.entries(groups)) {
      if (members.includes(calendar)) {
        grouped[group].push(calendar);
        placed = true;
        break;
      }
    }

    if (!placed) {
      grouped.other.push(calendar);
    }
  });

  return grouped;
}

const grouped = groupCalendars();
console.log(grouped);
// Output:
// {
//   solar: ["gregory", "iso8601", "persian", "ethiopic", "coptic"],
//   lunar: ["islamic", "islamic-civil", "islamic-rgsa", ...],
//   lunisolar: ["hebrew", "chinese", "dangi"],
//   erasBased: ["japanese", "roc", "buddhist"],
//   other: ["ethioaa", "indian"]
// }

Cette organisation aide les utilisateurs à comprendre les caractéristiques des différents systèmes de calendrier et à trouver celui dont ils ont besoin.

Gestion des environnements non pris en charge

La méthode Intl.supportedValuesOf() a été ajoutée à JavaScript en 2022. Les navigateurs plus anciens ne la prennent pas en charge. Vérifiez si la méthode existe avant de l'utiliser :

function getCalendars() {
  if (typeof Intl.supportedValuesOf === "function") {
    return Intl.supportedValuesOf("calendar");
  }

  return ["gregory"];
}

const calendars = getCalendars();
console.log(calendars);

Cela renvoie la liste complète des calendriers pris en charge dans les navigateurs modernes, et se replie sur le calendrier grégorien uniquement dans les environnements plus anciens.

Pour une meilleure compatibilité ascendante, fournissez une liste de repli plus complète :

function getCalendars() {
  if (typeof Intl.supportedValuesOf === "function") {
    return Intl.supportedValuesOf("calendar");
  }

  return [
    "buddhist",
    "chinese",
    "coptic",
    "ethiopic",
    "gregory",
    "hebrew",
    "indian",
    "islamic",
    "japanese",
    "persian",
    "roc"
  ];
}

Cela fournit un ensemble raisonnable de calendriers pour les navigateurs plus anciens, bien que vous ne puissiez pas garantir que tous fonctionnent dans chaque environnement.

Comprendre la différence entre calendrier et locale

Le calendrier et la locale sont des concepts liés mais distincts. La locale détermine la langue et les conventions de formatage régionales, tandis que le calendrier détermine quel système de calendrier utiliser.

Une seule locale peut utiliser plusieurs calendriers. Par exemple, les arabophones en Arabie Saoudite utilisent généralement le calendrier islamique à des fins religieuses et le calendrier grégorien à des fins civiles. Vous pouvez formater des dates en arabe en utilisant l'un ou l'autre calendrier :

const date = new Date("2025-10-15");

const arabicGregorian = new Intl.DateTimeFormat("ar-SA", {
  calendar: "gregory",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const arabicIslamic = new Intl.DateTimeFormat("ar-SA", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(arabicGregorian.format(date));
// Output: "١٥ أكتوبر ٢٠٢٥"

console.log(arabicIslamic.format(date));
// Output: "١٦ ربيع الآخر ١٤٤٧ هـ"

Les deux utilisent du texte et des chiffres arabes, mais affichent des dates différentes selon leurs calendriers respectifs.

Inversement, vous pouvez formater le même calendrier dans différentes langues :

const date = new Date("2025-10-15");

const englishIslamic = new Intl.DateTimeFormat("en-US", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const arabicIslamic = new Intl.DateTimeFormat("ar-SA", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(englishIslamic.format(date));
// Output: "Rabi' II 16, 1447 AH"

console.log(arabicIslamic.format(date));
// Output: "١٦ ربيع الآخر ١٤٤٧ هـ"

Les deux affichent la date islamique, mais utilisent des langues et des systèmes de numération différents.

Quand interroger les calendriers disponibles

Interrogez les calendriers disponibles dans ces situations :

Lors de la création d'une interface de sélection de calendrier, appelez Intl.supportedValuesOf("calendar") pour remplir les options. Cela garantit que vous n'affichez que les calendriers qui fonctionnent dans l'environnement actuel.

Lors de l'implémentation de fonctionnalités basées sur le calendrier, vérifiez si le calendrier requis est pris en charge avant de l'utiliser. Cela évite les erreurs et permet un repli élégant vers des calendriers alternatifs.

Lors du stockage des préférences utilisateur, validez les sélections de calendrier par rapport à la liste prise en charge. Cela garantit que les préférences enregistrées restent valides sur différents appareils et navigateurs.

Lors de la migration entre environnements, vérifiez la prise en charge du calendrier dans les environnements source et cible. La prise en charge du calendrier peut varier entre les versions de navigateur, les versions de Node.js et les différents environnements d'exécution JavaScript.

Lors du chargement de données dépendantes du calendrier, vérifiez que le calendrier est disponible avant de tenter d'analyser ou de formater des dates. Cela évite les erreurs d'exécution lors du travail avec des dates dans des systèmes de calendrier spécifiques.