Zum Hauptinhalt springen

Zeitauswahl

Zeitauswahl in Storybook

Diese Seite enthält Informationen über TimePicker und TimezonePicker.

Beispiele​

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

Zeit auswählen​

Sie können es dem Benutzer ermöglichen, mithilfe der TimePicker-Komponente eine Zeit auszuwählen. Verwenden Sie dann den Handler, um die ausgewählte Zeit abzurufen.

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

export function DinnerTimeSelector() {
  function handleTimeChange(event, value) {
    console.log('The user selected the following time for dinner:', value);
    // displays: { hours: 19, minutes: 30 }
  }

  return (
    <TimePicker
      label={{
        id: 'time-picker-label',
        defaultMessage: 'Enter dinner time',
      }}
      name="Dinner time picker"
      onChange={handleTimeChange}
    />
  );
}

Zeit und Zeitzone auswählen​

Sie können dem Benutzer erlauben, eine Zeit und eine Zeitzone mithilfe der TimePicker- und TimezonePicker-Komponenten auszuwählen. Verwenden Sie dann die Handler, um die ausgewählte Zeit und Zeitzone zu erhalten.

import { TimePicker, TimezonePicker } from '@jutro/components/new';

export function DinnerTimeSelector() {
  function handleTimeChange(event, value) {
    console.log('The user selected the following time for dinner:', value);
    // displays: { hours: 19, minutes: 30 }
  }

  function handleTimezoneChange(event, value) {
    console.log('The user selected the following timezone for dinner:', value);
    // displays: { timezone: 'Europe/Warsaw' }
  }

  return (
    <>
      <TimePicker
        label={{
          id: 'time-picker-label',
          defaultMessage: 'Enter dinner time',
        }}
        name="Dinner time picker"
        onChange={handleTimeChange}
      />
      <TimezonePicker
        label={{
          id: 'timezone-picker-label',
          defaultMessage: 'Set timezone for dinner time',
        }}
        initialValue={{ timezone: 'Europe/Warsaw' }}
        onChange={handleTimezoneChange}
      />
    </>
  );
}

Gesteuerte Zeitauswahl​

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

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

function DinnerTimeSelector() {
  const [time, setTime] = React.useState({ hour: 19, minute: 30 });

  function handleTimeChange(event, value) {
    setTime(value);
  }

  return (
    <TimePicker
      label={{
        id: 'time-picker-label',
        defaultMessage: 'Enter dinner time',
      }}
      name="Dinner time picker"
      onChange={handleTimeChange}
      value={time}
    />
  );
}

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

Tip: Wenn Sie den Wert für die Zeitauswahl formatieren möchten, können Sie mit dem folgenden Beispiel beginnen:
const dateObjectFromInput = new Date(0, 0, 0, time.hour, time.minute);
const formattedTime = Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
}).format(dateObjectFromInput);

Aus folgendem Grund ist es am besten, die Intl.DateTimeFormat-API zu verwenden, um den Wert der Zeitauswahl zu formatieren:

Jedes Mal, wenn toLocaleString aufgerufen wird, muss eine Suche in einer großen Datenbank mit Lokalisierungszeichenfolgen durchgeführt werden, was potenziell ineffizient ist. Wenn die Methode viele Male mit denselben Argumenten aufgerufen wird, ist es besser, ein Intl.DateTimeFormat-Objekt zu erstellen und dessen format()-Methode zu verwenden, denn ein DateTimeFormat-Objekt merkt sich die ihm übergebenen Argumente und kann entscheiden, einen Teil der Datenbank zwischenzuspeichern, sodass künftige Formataufrufe in einem eingeschränkteren Kontext nach Lokalisierungszeichenfolgen suchen können.

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

Gesteuerte Zeitzonenauswahl​

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

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

function TimezonePickerControlled() {
  const [timezone, setTimezone] = React.useState({
    timezone: 'Europe/Warsaw',
  });

  function handleTimezoneChange(event, value) {
    setTimezone(value);
  }

  return (
    <TimezonePicker
      label={{
        id: 'timezone-picker-label',
        defaultMessage: 'Set timezone for dinner time',
      }}
      onChange={handleTimezoneChange}
      value={timezone}
    />
  );
}

Beachten Sie, dass die value-Eigenschaft ein Objekt mit einer Eigenschaft namens timezone ist.

Zeitintervall, Zeitspanne und Zeitzonen angeben​

Für die Zeitauswahl können Sie Folgendes angeben:

  • Der min- und max-Wert für die Zeitspanne, zum Beispiel „9:00“ und „17:00“
  • Das Zeitintervall, zum Beispiel 15 Minuten

Bei der Zeitzonenauswahl können Sie die Liste der verfügbaren Zeitzonen einschränken. Übergeben Sie einfach ein Array von IANA-Zeitzonen.

<>
  <TimePicker
    label="Pick a meeting time"
    interval={15}
    minTime={{
      hour: 9,
      minute: 0,
    }}
    maxTime={{
      hour: 17,
      minute: 30,
    }}
  />
  <TimezonePicker
    label="Set your timezone"
    availableTimezones={['Africa/Lagos', 'Africa/Maputo', 'Africa/Monrovia']}
  />
</>

Zeitzonenauswahl in Typescript​

Haben Sie Probleme mit Typescript? Sehen Sie sich das folgende Beispiel an:

function TimezonePickerControlled() {
  const [timezone, setTimezone] =
    React.useState <
    JutroTimezone >
    {
      timezone: 'Europe/Warsaw',
    };

  function handleTimezoneChange(
    event: DropdownOnChangeEvent<JutroTimezone>,
    value: JutroTimezone
  ) {
    setTimezone(value);
  }

  return (
    <TimezonePicker
      label={{
        id: 'timezone-picker-label',
        defaultMessage: 'Set timezone for dinner time',
      }}
      onChange={handleTimezoneChange}
      value={timezone}
    />
  );
}