Zum Hauptinhalt springen

Datumseingabe

Datumseingabe in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponente DateInput verwenden können.

Grundlegende DateInput-Varianten​

Sie können die variant-Eigenschaft verwenden, um eine Eingabekomponente mit verschiedenen Feldern zu erstellen:

import React from 'react';
import { DateInput } from '@jutro/components/new';

export const BasicDateInput = () => {
  return (
    <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap'}}>
        <DateInput label="This is a simple date input" />
        <DateInput label="This is a month and year input" variant='month' />
        <DateInput label="This is a year input" variant='year' />
    </div>
  );
};

Beispiel für einen Fehler​

Mit der Eigenschaft stateMessages können Sie einen Fehler für die DateInput-Komponente anzeigen.

import React from 'react';
import { DateInput } from '@jutro/components/new';

export const ErrorDateInput = () => {

  return (
    <div>
      <DateInput
        label="This is a date input"
        stateMessages= {{
            error: ['This is an error message'],
        }}
      />
    </div>
  );
};

Beispiel für Min/Max​

Mit den Eigenschaften minDate und maxDate können Sie ein Mindest- und ein Höchstdatum für die DateInput-Komponente festlegen. Alternativ können Sie mit minMonth, minYear, maxMonth und maxYear unabhängige Werte für Monate und Jahre festlegen. Im folgenden Beispiel wird geprüft, wann der Fokus verloren geht, wenn der Jahreswert zwischen 2000 und 2024 liegt, und falls er nicht zwischen diesen Werten liegt, wird ein Fehler angezeigt.

import React, { useState } from 'react';
import { DateInput } from '@jutro/components/new';

export const MinMaxDateInput = () => {
  const [stateMessages, setStateMessages] = useState({});

  const handleChange = (event, value, errorObject) => {
    const errorCode = errorObject?.errorCode;

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

    if (errorCode === 'MIN_EXCEEDED' || errorCode === 'MAX_EXCEEDED') {
      setStateMessages({
        error: [`The year must be between 2000 and 2024.`],
      });
    } else {
      setStateMessages({});
    }
  };

  return (
    <div>
      <DateInput 
        label="Enter a date between year 2000 and year 2024" 
        minDate={{ day: 1, month: 1, year: 2000 }}
        maxDate={{ day: 31, month: 12, year: 2024 }}
        onChange={handleChange}
        stateMessages={stateMessages}
      />
    </div>
  );
};

Anzeigeoptionen für Datumseingaben​

Bei Verwendung der Eigenschaft readOnly oder displayOnly kann das Format der Datumsangaben geändert werden, wenn die Eigenschaft displayFormat verwendet wird.

import React from 'react';
import { DateInput } from '@jutro/components/new';

export const DisplayOptionsDateInput = () => {
  return (
    <div>
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap'}}>
        <DateInput label="Vshort" readOnly displayFormat="vshort" initialValue={{ day: 20, month: 6, year: 2024  }} />
        <DateInput label="Short" readOnly displayFormat="short" initialValue={{ day: 20, month: 6, year: 2024  }} />
        <DateInput label="Long" readOnly displayFormat="long" initialValue={{ day: 20, month: 6, year: 2024  }} />
    </div><br />
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center'}}>
        <DateInput label="Abbreviated" readOnly displayFormat="abbreviated" initialValue={{ day: 20, month: 6, year: 2024  }} />
        <DateInput label="Full" readOnly displayFormat="full" initialValue={{ day: 20, month: 6, year: 2024  }} />
    </div>
    </div>
  );
};