Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Overview Releases Design Tokens Komponenten Aperçu Base Informations Aperçu Base Composants Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Datepicker Info

Was macht die Komponente?

Ein Date-Picker ist eine Eingabekomponente, die es den Nutzenden ermöglicht, ein Datum aus einer Kalender-Ansicht auszuwählen.

Wann soll die Komponente eingesetzt werden?

  • Um Nutzenden die Auswahl eines spezifischen Datums zu erleichtern.
  • Um die Genauigkeit und Konsistenz der Datumseingabe zu gewährleisten.
  • Um eine benutzerfreundliche Alternative zur manuellen Datumseingabe anzubieten.


  • Der Date-Picker soll nach Möglichkeit ein Standardwert anzeigen, z.B. das heutige Datum.
  • Der Date-Picker kann mit oder ohne Vor- und Zurück-Buttons dargestellt werden.
  • Der Date-Picker soll lokalisiert dargestellt werden und das Datumsformat der Nutzenden berücksichtigen.
  • Bei Fehlermeldungen (z.B. ungültiges Datum) soll eine klare und verständliche Fehlermeldung angezeigt werden.

Enthaltene Komponenten

Anatomie der Komponente
Nummer Typ Beschreibung Optional Hinweis
1 Komponente sbb-form-field Nein
1a Standard-HTML input Nein
1b Standard-HTML label Nein
1c Komponente sbb-datepicker-previous-day Ja
1d Komponente sbb-datepicker-toggle Ja
1e Komponente sbb-datepicker-next-day Ja
2 Komponente sbb-datepicker Nein


Wide Nein Ja Hintergrund White Milk Iron Charcoal Black


In Form Field
In Form Field Disabled
In Form Field Readonly
In Form Field Negative
In Form Field Disabled Negative
In Form Field Readonly Negative
In Form Field Wide
In Form Field With Min And Max
In Form Field With Date Filter
In Form Field With Date Parser
In Form Field Large
In Form Field Optional
In Form Field Borderless
Without Form Field
HTML-Markup kopiert.

The sbb-datepicker is a component which can be used together with a native <input> element
to display the typed value as a formatted date (default: dd.MM.yyyy).

The component allows the insertion of up to 10 numbers, possibly with separators like ., -, , , or /,
then automatically formats the value as date and displays it.
It also exposes methods to get / set the value formatted as Date.

The component and the native input can be connected using the input property,
which accepts the id of the native input, or directly its reference.

<input id="datepicker-input" />
<sbb-datepicker input="datepicker-input" id="datepicker"></sbb-datepicker>

In sbb-form-field

If the sbb-datepicker is used within a sbb-form-field with a native input,
they are automatically linked; the component sets the input placeholder and the input's type as text,
then reads the disabled, readonly, min and max attributes from the input and emits then as payload of the inputUpdated event.

It's possible to remove unwanted dates from selection using the dateFilter function, however, this should not
be used as a replacement for the min and max properties will most likely result in a significant loss of performance.

It's also possible to display a two-months view using the wide property.

  <input />
<!-- Component's usage with all the related components. -->
  <input value="01.01.2023" min="1600000000" max="1700000000" />


If the input's value changes, it is formatted then a change event is emitted with the new value.
If it's an invalid date, the data-sbb-invalid attribute is added to the input.
The component also listens for changes in its two properties, wide and dateFilter, and emits a datePickerUpdated event when changed.

Consumers can listen to the native change and input events on the sbb-datepicker component to intercept date changes,
the current value can be read from the async method event.target.getValueAsDate().
To set the value programmatically, it's recommended to use the setValueAsDate() method of the sbb-datepicker.

Each time the user changes the date by using the calendar, or the next and previous day arrow, or by using the setValueAsDate() method,
a blur event is fired on the input to ensure compatibility with any framework that relies on that event to update the current state.

Custom date formats

To simulate the current date, you can use the now property,
which accepts a Date or a timestamp in seconds (as number or string).
This is helpful if you need a specific state of the component.

Using a combination of the dateParser and format properties, it's possible to configure the datepicker
to accept date formats other than the default EE, dd.mm.yyyy.
In the following example the datepicker is set to accept dates in the format yyyy-mm-dd.
In particular, dateParser is the function that the component uses internally to decode strings and parse them into Date objects,
while the format function is the one that the component uses internally to display a given Date object as a string.

// datePicker is a SbbDatepickerElement element
datePicker.dateParser = (value: string) => {
  // You should implement some kind of input validation
  if (!value <sbb-table-wrapper>

|| !isValid(value)) {



    return undefined;

  return new Date(value);

datePicker.format = (value: Date) => {
  if (!value) {
    return '';

  const offset = value.getTimezoneOffset();
  value = new Date(yourDate.getTime() - offset * 60 * 1000);
  return yourDate.toISOString().split('T')[0];

Usually these functions need to be changed together, although in simple cases where the default dateParser might still work properly
(e.g., in case we wanted to accept the format dd.mm.yyyy), it's possible to provide just the format function.
For custom format functions is recommended to use the Intl.DateTimeFormat API, as it's done in the default implementation.

Validation Change

Whenever the validation state changes (e.g., a valid value becomes invalid or vice-versa), the validationChange event is emitted.


Name Attribute Privacy Type Default Description
dateFilter date-filter public (date: Date | null) => boolean A function used to filter out dates.
dateParser date-parser public (value: string) => Date | undefined | undefined A function used to parse string value into dates.
format format public (date: Date) => string | undefined A function used to format dates into the preferred string format.
input input public string | HTMLElement | undefined Reference of the native input connected to the datepicker.
now now public Date null A configured date which acts as the current date instead of the real current date. Recommended for testing purposes.
wide wide public boolean false If set to true, two months are displayed.


Name Privacy Description Parameters Return Inherited From
getValueAsDate public Gets the input value with the correct date format. Date | undefined
setValueAsDate public Set the input value to the correctly formatted value. date: SbbDateLike void


Name Type Description Inherited From
change CustomEvent<void> Notifies that the connected input has changes.
datePickerUpdated CustomEvent<void> Notifies that the attributes of the datepicker have changes.
didChange CustomEvent<void> Deprecated. used for React. Will probably be removed once React 19 is available.
inputUpdated CustomEvent<SbbInputUpdateEvent> Notifies that the attributes of the input connected to the datepicker have changes.
validationChange CustomEvent<SbbValidationChangeEvent> Emits whenever the internal validation state changes.
Impressum Contact Paramètres des cookies