Zum Hauptinhalt springen

Jahr-Auswahl

Jahr-Auswahl in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Jahresauswahl und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Sie können einem Benutzer gestatten, mithilfe der bereitgestellten Eingabe ein Jahr auszuwählen.

<YearPicker
  label={{
    id: 'year-picker',
    defaultMessage: 'Enter year',
  }}
  onChange={(event, value) => console.log('The year chosen is', value.year)}
/>

Beispiel für einen Fehler​

Die stateMessages-Eigenschaft kann zum Anzeigen eines Fehlers verwendet werden.

<YearPicker
  label={{
    id: 'year-picker',
    defaultMessage: 'Enter year',
  }}
  stateMessages={{ error: ['This is an error message'] }}
/>

Beispiel für Min/Max​

Mit den Eigenschaften minYear und maxYear können Sie einschränken, welche Jahre ein Benutzer auswählen kann.

Note: Dies beinhaltet keine Validierung, sondern schränkt nur die Optionen in einem Dropdown-Menü ein. Benutzer können manuell ein beliebiges Jahr eingeben.
<YearPicker
  label={{
    id: 'year-picker',
    defaultMessage: 'Enter year',
  }}
  minYear={{ year: 2020 }}
  maxYear={{ year: 2030 }}
/>

Beispiel für eine kontrollierte Auswahl​

Sie können die Jahr-Auswahl steuern, indem Sie die Werteigenschaft übergeben. Dies ist hilfreich, wenn Sie die Jahresauswahl als gesteuerte Komponente verwenden möchten.

const [picked, setYear] = React.useState({ year: undefined });

    function handleYearChange(event, value) {
        setYear(value);
    }

<YearPicker
    label={{
    id: 'year-picker-label',
    defaultMessage: 'Select year',
    }}
    onChange={handleYearChange}
    value={picked}
/>
<div>
    {picked && picked.year ? (
        <>The selected year is {picked.year}.</>
    ) : (
        <>Waiting for the user to specify year.</>
    )}
</div>