Zum Hauptinhalt springen

Monatsauswahl

Monatsauswahl in Storybook

Beispiele​

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

Wählen Sie einen Monat​

Sie können dem Benutzer erlauben, einen Monat mithilfe der MonthPicker-Komponente auszuwählen. Verwenden Sie dann den Handler, um den ausgewählten Monat zu erhalten. Der Benutzer wählt eine Kombination aus Monat und Jahr aus.

import { MonthPicker } from '@jutro/components/new';

export function MonthSelector() {
  function handleMonthChange(event, value) {
    console.log('The user selected the following month:', value);
    // displays: { year: 2023, month: 1 }
  }

  return (
    <MonthPicker
      label={{
        id: 'month-picker-label',
        defaultMessage: 'Enter month',
      }}
      onChange={handleMonthChange}
    />
  );
}

Gesteuerte Monatsauswahl​

Sie können die Monatsauswahl steuern, indem Sie die value-Eigenschaft übergeben. Dies ist nützlich, wenn Sie die Monatsauswahl als gesteuerte Komponente verwenden möchten.

import { MonthPicker } from '@jutro/components/new';

function MonthPickerControlled() {
  const [picked, setMonth] = React.useState({ year: 2023, month: 1 });

  function handleMonthChange(event, value) {
    setMonth(value);
  }

  return (
    <MonthPicker
      label={{
        id: 'month-picker-label',
        defaultMessage: 'Enter month',
      }}
      onChange={handleMonthChange}
      value={picked}
    />
  );
}

Beachten Sie, dass die value-Eigenschaft ein Objekt mit den Eigenschaften year und month ist.

Tip: Wenn Sie den Wert für die Monatsauswahl formatieren möchten, können Sie mit dem folgenden Beispiel beginnen:
const dateObjectFromInput = new Date(picked.year, picked.month, 1, 0, 0);
const formattedTime = Intl.DateTimeFormat('en-US').format(dateObjectFromInput);

Es empfiehlt sich, die Intl.DateTimeFormat API zu verwenden, um den Monatsauswahlwert zu formatieren, da jedes Mal, wenn toLocaleString aufgerufen wird, eine Suche in einer großen Datenbank mit Lokalisierungszeichenfolgen durchgeführt werden muss, was potenziell ineffizient ist. Durch Erstellen eines Intl.DateTimeFormat-Objekts und Verwenden seiner format()-Methode kann dieses Problem vermieden werden, da sich ein DateTimeFormat-Objekt die übergebenen Argumente merkt und möglicherweise beschließt, einen Teil der Datenbank zwischenzuspeichern.

Weitere Informationen finden Sie in der MDN-Dokumentation zu DateTimeFormat.

Intervall festlegen​

Sie können den Datumsbereich „min“ und „max“ angeben, um die Anzahl der gültigen Optionen einzuschränken, z. B. „Januar 2024“ und „Dezember 2024“ würde ihn auf einen beliebigen Monat im Jahr 2024 beschränken.

<MonthPicker
  label="Pick a month"
  minMonth={{
    year: 2024,
    month: 1,
  }}
  maxMonth={{
    year: 2024,
    month: 12,
  }}
/>