Zum Hauptinhalt springen

Datumsauswahl

Datumsauswahl in Storybook

Beispiele​

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

Einfaches Beispiel​

Sie können eine Eingabe hinzufügen, mit der ein Benutzer ein Datum entweder manuell oder über ein modales Kalenderfenster eingeben kann.

<DatePicker
  label="Choose date"
  onChange={(event, value) =>
    console.log('The date chosen is', value.day, value.month, value.year)
  }
/>

Beispiel für Min/Max​

Sie können den Datumsbereich begrenzen, der vom Benutzer ausgewählt werden kann.

Note: Dies beinhaltet keine Validierung, sondern schränkt nur die Optionen in einer Dropdown-Liste ein. Benutzer können jedes Datum manuell eingeben.
<DatePicker
  label="Choose date"
  minDate={{ day: 1, month: 1, year: 2022 }}
  maxDate={{ day: 31, month: 12, year: 2023 }}
/>

Beispiel für Validierung​

Mit der Eigenschaft onChange kann eine Funktion aufgerufen werden, die stateMessages aktualisiert, um dem Benutzer Fehler anzuzeigen.

Im folgenden Beispiel werden Fehler für ungültige Daten oder Daten angezeigt, die nicht im Jahr 2022 liegen.

function DatePickerMinMaxValidation() {
  const [validationMessages, setValidationMessages] = useState({});
  const minDate = { day: 1, month: 1, year: 2022 };
  const maxDate = { day: 31, month: 12, year: 2022 };

  function JutroDateToString(date) {
    return `${date.year}-${String(date.month).padStart(2, '0')}-${String(
      date.day
    ).padStart(2, '0')}`;
  }

  const parseErrorCode = (errorObject: { errorCode?: string }) => {
    if (!errorObject) {
      return;
    }

    const { errorCode } = errorObject;

    if (errorCode === 'INVALID_DATE') {
      return { error: ['Please enter a valid date.'] };
    }

    if (errorCode === 'MIN_EXCEEDED') {
      return {
        error: [`Please enter a date after ${JutroDateToString(minDate)}.`],
      };
    }

    if (errorCode === 'MAX_EXCEEDED') {
      return {
        error: [`Please enter a date before ${JutroDateToString(maxDate)}.`],
      };
    }
  };

  const onChange = useCallback((e, newValue, errorObject) => {
    setValidationMessages({});
    const errorDetected = parseErrorCode(errorObject);

    if (errorDetected) {
      setValidationMessages(errorDetected);
    }
  }, []);

  return (
    <DatePicker
      label="Choose date"
      onChange={onChange}
      minDate={minDate}
      maxDate={maxDate}
      stateMessages={validationMessages}
    />
  );
}