Obtenir la liste des systèmes de calendrier disponibles

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 peut-être 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 hégirien, le calendrier hébraïque ou le calendrier bouddhiste.

Pour permettre aux utilisateurs de sélectionner leur calendrier préféré, vous devez savoir quels systèmes de calendrier l'environnement JavaScript prend en charge. 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 propose uniquement 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 le début d'une année, la durée des mois et la prise en 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 suivant 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 lunisolaires, 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 calendaire détermine quels numéros d'année, de mois et de jour apparaissent. Le même instant dans le temps a différentes représentations de date dans différents systèmes calendaires.

Utiliser Intl.supportedValuesOf pour obtenir les systèmes calendaires

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

const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Output: ["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 retourne un tableau de chaînes représentant des identifiants calendaires. Ces identifiants suivent la norme Unicode CLDR (Common Locale Data Repository), qui fournit une manière cohérente de référencer les systèmes calendaires à travers 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 calendaires 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 courants.

Comprendre les identifiants calendaires

Chaque identifiant calendaire représente un système calendaire 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 jour que le calendrier grégorien mais compte les années à partir de la naissance de Bouddha (543 avant notre ère 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 hégirien, un calendrier purement lunaire composé de 12 mois de 29 ou 30 jours. Les années sont comptées à partir de l'Hégire, lorsque Muhammad 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 avant notre ère 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 hégirien utilisé en Iran et en Afghanistan. Il s'agit d'un calendrier solaire dont les années sont comptées à partir de l'Hégire, ce qui le différencie du calendrier islamique lunaire.

Les identifiants supplémentaires incluent "coptic" (calendrier copte orthodoxe), "dangi" (calendrier coréen traditionnel), "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 (étendant le calendrier grégorien en arrière avant son introduction en 1582).

Voir les systèmes de calendrier en action

Pour comprendre comment les systèmes de calendrier affectent le formatage des dates, formatez 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 instant dans le temps, mais chaque système de calendrier exprime cet instant avec des valeurs d'année, de mois et de jour différentes. 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 vous devez spécifier quel système de calendrier utiliser lors du formatage des dates pour les utilisateurs qui suivent différents calendriers.

Créer 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 créez 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.

Afficher des noms de calendrier lisibles

L'API Intl.DisplayNames convertit les identifiants de calendrier en noms lisibles. 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);

Désormais, le menu déroulant affiche des noms comme "calendrier grégorien", "calendrier islamique" et "calendrier hébraïque" au lieu d'identifiants techniques.

Vous pouvez afficher les noms de calendrier 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 de calendrier 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éer une fonction de détection de fonctionnalité réutilisable

Créez une fonction générique pour vérifier la prise en charge des calendriers et gérer les calendriers manquants de manière élégante :

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 tente d'utiliser le calendrier préféré, revient au calendrier de secours spécifié si le calendrier préféré n'est pas disponible, et retourne finalement le premier calendrier disponible si les deux ne sont pas pris en charge.

Filtrer les 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 inclure uniquement 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);
// Output: ["gregory", "islamic", "hebrew", "buddhist"]
// (assuming all are supported in the current environment)

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.

Regrouper les calendriers par catégorie

Pour les applications qui prennent en charge de nombreux calendriers, regroupez-les par type ou 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.

Gérer les 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 seul calendrier grégorien dans les environnements plus anciens.

Pour une meilleure rétrocompatibilité, 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 qu'ils fonctionnent tous dans tous les environnements.

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 calendaire 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 une numérotation 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érotation 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 un calendrier, vérifiez si le calendrier requis est pris en charge avant de l'utiliser. Cela évite les erreurs et permet un repli gracieux vers des calendriers alternatifs.

Lors de l'enregistrement 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 des calendriers dans les environnements source et cible. La prise en charge des calendriers 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 de la manipulation de dates dans des systèmes de calendrier spécifiques.