DatePicker

Eine Pill mit dem Datum; ein Kalender mit Kreisen, heute umrandet, und ein Feld für getippte ISO-Daten.

Quelltext
import { DatePicker, DateRangePicker, Calendar, TimeInput } from "@logicplanes/kaeso-ui";

Props

  • aria-label
    string

    Benennt den Auslöser, wenn es kein label gibt: „Läuft ab“. Was er zeigt (das Datum oder den Platzhalter), wird seine Beschreibung.

  • aria-labelledby
    string

    Benennt den Auslöser über die Elemente mit diesen IDs, wie aria-label.

  • defaultValue
    Date | null

    Der gewählte Tag beim ersten Rendern.

  • description
    ReactNode

    Ein Satz Hilfe unter der Beschriftung.

  • disabled
    boolean

    Schaltet es aus: Es lässt sich nicht verwenden und wirkt abgeblendet.

  • disabledDays
    ((date: Date) => boolean)

    Gibt true für Tage zurück, die sich nicht wählen lassen.

  • id
    string

    Die ID des Steuerelements, damit eine Beschriftung an anderer Stelle darauf verweisen kann.

  • label
    ReactNode

    Die sichtbare Beschriftung.

  • layout
    "horizontal" | "vertical"

    Die Beschriftung über dem Steuerelement (vertical) oder daneben (horizontal).

  • onValueChange
    ((value: Date | null) => void)

    Wird mit dem gewählten Tag aufgerufen, oder mit null, wenn er gelöscht wird.

  • optional
    boolean

    Ergänzt die Beschriftung um „Optional“, für Formulare, in denen die meisten Felder Pflicht sind.

  • placeholder
    string

    Wird ohne Datum angezeigt. Standardmäßig „Datum wählen“ („Zeitraum wählen“ für einen Zeitraum) in der Sprache des LocaleProvider.

  • required
    boolean

    Markiert es in einem Formular als Pflichtfeld.

  • size
    "md" | "sm" | "lg"

    Die Höhe des Felds.

  • value
    Date | null

    Der gewählte Tag, bei gesteuertem Wert.

  • weekStartsOn
    0 | 4 | 1 | 2 | 3 | 5 | 6

    Der erste Tag der Woche, von 0 (Sonntag) bis 6 (Samstag); standardmäßig entscheidet die Sprache.