Zum Hauptinhalt springen

Datumsbereich

Datumsbereich in Storybook

Beispiele​

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

Einfaches Beispiel​

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

<DateRangePicker
  label={{ start: 'Choose start date', end: 'Choose end date' }}
  onChange={(event, value) =>
    console.log('The dates chosen are', value.start, value.end)
  }
/>

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 dem modalen Kalenderfenster ein. Benutzer können ein beliebiges Datum in die Eingabe eingeben.
<DateRangePicker
  label={{ start: 'Choose start date', end: 'Choose end date' }}
  minDate={{ day: 1, month: 1, year: 2024 }}
  maxDate={{ day: 31, month: 12, year: 2024 }}
/>

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 2024 liegen.

Note: Wie im vorherigen Beispiel erwähnt, können Benutzer unabhängig von den Eigenschaften minDate und maxDate ein beliebiges Datum eingeben.
import React, { useState } from 'react';
import { DateRangePicker } from '@jutro/components/new';

export function DateRangePickerError() {
  const [stateMessages, setStateMessages] = useState({});

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

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

  const handleChange = (event, value, errorObject) => {
    let parsedMessages: {
      start?: { error: string[] };
      end?: { error: string[] };
    } = {};
    // check start
    let start_error = errorObject?.start;
    if (start_error) {
      parsedMessages.start = parseErrorCode(start_error);
    }

    // check end
    let end_error = errorObject?.end;
    if (end_error) {
      parsedMessages.end = parseErrorCode(end_error);
    }
    console.log(parsedMessages);
    setStateMessages(parsedMessages);
  };

  return (
    <DateRangePicker
      label={{ start: 'Choose start date', end: 'Choose end date' }}
      minDate={{ day: 1, month: 1, year: 2024 }}
      maxDate={{ day: 31, month: 12, year: 2024 }}
      onChange={handleChange}
      stateMessages={stateMessages}
    />
  );
}