Exemples

Chaque composant ci-dessous tourne dans cette page. Cliquez dessus.

Un calendrier

createCalendar(element, { locale: 'fr-FR', buttons: ['today', 'clear'] });

nothing chosen

Six semaines, toujours, pour que la page ne saute pas d’un mois à l’autre. Les flèches déplacent d’un jour, Page↑ et Page↓ d’un mois, Début et Fin d’un bout à l’autre de la semaine, et le titre dézoome sur les mois puis les années — quatre clics pour une date à trois cents jours.

Numéros de semaine

createCalendar(element, { locale: 'fr-FR', weekNumbers: true });

nothing chosen

Numéros de semaine ISO, pris sur le premier jour de chaque ligne : ils suivent donc firstDayOfWeek. Tous les composants qui contiennent un calendrier acceptent l’option, panneaux compris.

Un champ

createDateField(element, { locale: 'fr-FR', mode: 'popup' });

nothing chosen

mode: 'dialog' centre le panneau sur la page au lieu de le suspendre sous le champ.

Une date et une heure

createDateTimeField(element, {
  timeZone: 'Europe/Paris',
  locale: 'fr-FR',
  buttons: ['today', 'clear'],
});

nothing chosen

Tapez dedans : les séparateurs apparaissent au fil de la saisie. Essayez 25/10/2026 02:30 — ce cadran a lieu deux fois à Paris ce matin-là, donc il demande lequel vous visez, puis écrit la réponse dans le texte.

Plusieurs jours

createMultiDate(element, { locale: 'fr-FR', maxDates: 5 });

nothing chosen

Un clic ajoute un jour, un second le retire, et la valeur reste dans l’ordre des dates. Une fois cinq jours choisis, les autres cessent d’accepter les clics.

Une plage de jours

createDateRange(element, {
  locale: 'fr-FR',
  isDateDisabled: (day) => day.dayOfWeek > 5,   // week-ends fermés
});

nothing chosen

La suite de jours sous le pointeur est celle qui sera choisie. Une plage qui enjamberait un jour fermé est refusée, avec un mot qui dit pourquoi.

Les créneaux d’une journée

createTimeSlots(element, {
  date: '2026-10-25',
  timeZone: 'Europe/Paris',
  stepMinutes: 60,
  isDisabled: (slot) => slot.time.hour === 13,  // la pause déjeuner est prise
});

nothing chosen

C’est le matin où l’on recule les pendules à Paris : 02:00 apparaît deux fois, distinguées par leur décalage. Une heure d’écart, et la valeur que vous recevez est celle sur laquelle vous avez cliqué. Le 29 mars, la même liste affiche 02:00 barré, parce que cette heure n’a pas lieu.

Un intervalle

createDateTimeRange(element, { timeZone: 'Europe/Paris', locale: 'fr-FR' });

nothing chosen

Essayez du 24/10/2026 23:00 au 25/10/2026 05:00 : six heures à l’horloge, sept en réalité — et il le dit, plutôt que de vous laisser le remarquer.

Une période, en un champ

createRangeField(element, {
  timeZone: 'Europe/Paris',
  locale: 'fr-FR',
  showTime: true,
  openEnded: true,
  months: 2,
});

nothing chosen

Deux champs dans le panneau, un par borne : un clic remplit celui qui est armé, donc corriger la fin ne jette pas le début. Les deux se saisissent au clavier, ce dont une période finissant en février 2028 a réellement besoin. Les raccourcis vont du plus court au plus long, et openEnded permet de vider un champ — à partir du 18 sans fin, c’est ce que veulent dire la plupart des recherches.

Tout est détaillé dans Choisir une période : les raccourcis, les flèches, les mots au-dessus des champs, et les deux matins de l’année où une heure n’est pas ce qu’elle paraît.

Décaler une période

createRangeField(element, {
  timeZone: 'Europe/Paris',
  locale: 'fr-FR',
  presets: ['thisQuarter', 'lastQuarter', 'nextQuarter'],
  shift: { months: 3 },
});

nothing chosen

Un rapport se lit en comparant : ce trimestre et le précédent, cette semaine et la dernière. Par le calendrier, c’est quatre clics. Les flèches en font un seul, et elles n’apparaissent que si on les demande — un champ qui désigne un seul jour choisi n’a rien à parcourir.

Un pas exprimé en mois décale en mois, et ce n’est pas la même chose qu’un décalage d’une longueur en jours. Le troisième trimestre 2026 fait 92 jours ; reculer de 92 jours depuis le 1er juillet tombe sur le 31 mars — un jour trop tôt, et la dérive s’aggrave à chaque appui. Dit en mois, il ne peut pas dériver, et la fin est recalculée pour qu’un trimestre finisse sur son propre dernier jour.

Les raccourcis plus courts qu'un jour

Deux des raccourcis sont plus courts qu'un jour, et ceux-là sont deux moments, pas deux dates — 21/09/2026 11:00 à 11:15, comptés sur l'horloge du fuseau du composant. Un raccourci calcule une valeur ; le pas des flèches appartient à l'écran, et presser l'un ne change jamais l'autre.

createRangeField(element, {
  timeZone: 'Europe/Paris',
  shift: 15,
  presets: ['thisQuarterHour', 'thisHour', 'thisQuarter', 'last7Days'],
});

nothing chosen

Un raccourci à vous rend deux moments de la même façon :

{
  name: 'lastFiveMinutes',
  label: 'Dernières 5 minutes',
  range: (today, { now, timeZone }) => ({ start: now.subtract({ minutes: 5 }), end: now }),
}

Un pas fixe est une durée, et il l’emporte sur ce qui est sélectionné — c’est la façon de décaler une période de quelque chose de plus petit qu’elle :

createRangeField(element, {
  timeZone: 'Europe/Paris',
  showTime: true,
  shift: '15mn',
});

Du 18/09 10:00 au 21/09 05:00 passe alors à 10:15 et 05:15, les deux bornes ensemble : l’écart entre elles ne change jamais, et trois jours de distance ne sont pas une raison de ne pas avancer d’un quart d’heure.

Donnez une liste et c’est le lecteur qui choisit : un bouton entre les flèches affiche le pas courant et passe au suivant à chaque appui.

createRangeField(element, {
  timeZone: 'Europe/Paris',
  shift: [
    { step: '7d',   label: '7 jours' },
    { step: '3mo',  label: 'un trimestre' },
  ],
});

Le libellé est à vous : seule l’application sait si ses lecteurs disent « 15 min », « un quart d’heure » ou « quarter hour ».

Sur un moment isolé — createDateTimeField — le pas est toujours explicite, parce qu’un moment n’a aucune longueur propre à suivre :

createDateTimeField(element, { timeZone: 'Europe/Paris', shift: { minutes: 15 } });

// ou laissez le lecteur choisir
createDateTimeField(element, {
  timeZone: 'Europe/Paris',
  shift: [
    { step: { minutes: 15 }, label: '15 min' },
    { step: { hours: 1 }, label: '1 h' },
    { step: { days: 1 }, label: '1 jour' },
  ],
});

Il est compté sur les horloges du fuseau, pas en millisecondes : une heure après le premier 02:30 du 25 octobre à Paris, c’est le second 02:30, et un jour après 15:00 cet après-midi-là, c’est 15:00 le lendemain — vingt-cinq heures plus tard.

Une journée entière, ou un intervalle

createDateTimeRange(element, { timeZone: 'Europe/Paris', locale: 'fr-FR' });

nothing chosen

Une recherche sur « du 24 au 26 » et une sur « de 23:00 à 05:00 », c’est le même composant avec l’interrupteur dans deux positions. Les journées entières vont de minuit à minuit, et la valeur dit ce qu’elle est :

{
  start: Instant,  // le 24 à 00:00 dans le fuseau
  end:   Instant,  // le 27 à 00:00 — le minuit qui suit le dernier jour
  allDay: true,
}

La fin est exclusive à dessein, pour qu’une requête s’écrive start >= from AND start < to sans que rien ne tombe dans le trou de 23:59:59. Éteignez l’interrupteur et les bornes redeviennent des moments, aux minuits où elles étaient.

[allDaySwitch]="false" masque l’interrupteur, pour un écran qui ne traite que des journées entières — ou que des intervalles.

C’est le seul composant qui a cet interrupteur. Le champ de Choisir une période n’en a pas : il lit les journées entières sur les deux moments, end étant le minuit qui suit le dernier jour. Prenez celui-ci quand le drapeau lui-même doit voyager jusqu’à un back-end ; prenez l’autre quand les deux moments ont le droit de le dire tout seuls.

Les mêmes horaires chaque jour

createDailyRange(element, { timeZone: 'Europe/Paris', locale: 'fr-FR', stepMinutes: 30 });

nothing chosen

Prenez du 23 au 26 octobre, de 22:00 à 06:00 : quatre nuits de travail, 33 heures et non 32, et la nuit qui diffère est nommée.