Datumsauswahl

"use client"

import * as React from "react"

Der Date Picker ist kein einzelnes Primitive – er komponiert die Komponenten Popover und Calendar, wobei react-day-picker das Kalenderraster übernimmt, gestaltet nach dem neobrutalistischen Rezept: dicke Rahmen, harte Schatten und kräftige Typografie.

Die richtige Wahl für:

• Buchung und Terminplanung – Check-in-/Check-out-Zeiträume, Terminslots, Liefertermine.
• Formularfelder – Geburtsdatum, Deadlines, Startdaten; kombiniere ihn mit einem Eingabefeld für getippte Eingaben.
• Dashboard-Filter – Zeitraumauswahl für Analysen, Bestellungen und Berichte.

Installation#

Der Date Picker wird mithilfe einer Komposition der Komponenten <Popover /> und <Calendar /> erstellt.

Siehe die Installationsanweisungen für die Komponenten Popover und Calendar.

Verwendung#

Kopieren"use client"
 
import * as React from "react"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"
 
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
 
export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()
 
  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            data-empty={!date}
            className="justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
          />
        }
      >
        <CalendarIcon />
        {date ? format(date, "PPP") : <span>Pick a date</span>}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </PopoverContent>
    </Popover>
  )
}

Weitere Informationen findest du in der React DayPicker-Dokumentation.

Komposition#

Eine Datumsauswahl wird aus Popover und Calendar aufgebaut (es gibt keine DatePicker-Wurzelkomponente):

KopierenPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Beispiele#

Grundlegend#

Eine grundlegende Datumsauswahl-Komponente.

"use client"

import * as React from "react"

Bereichsauswahl#

Eine Datumsauswahl-Komponente zum Auswählen eines Datumsbereichs.

"use client"

import * as React from "react"

Geburtsdatum#

Eine Datumsauswahl-Komponente zum Auswählen eines Geburtsdatums. Diese Komponente enthält ein Dropdown-Überschriftenlayout zur Auswahl von Datum und Monat.

"use client"

import * as React from "react"

Eingabefeld#

Eine Datumsauswahl-Komponente mit einem Eingabefeld zum Auswählen eines Datums.

"use client"

import * as React from "react"

Zeitauswahl#

Eine Datumsauswahl-Komponente mit einem Zeiteingabefeld zum Auswählen einer Uhrzeit.

"use client"

import * as React from "react"

Auswahl in natürlicher Sprache#

Diese Komponente verwendet die chrono-node-Bibliothek, um Datumsangaben in natürlicher Sprache zu parsen.

"use client"

import * as React from "react"

RTL#

Um RTL-Unterstützung in Neobrutalism zu aktivieren, siehe die RTL-Konfigurationsanleitung.

"use client"

import * as React from "react"

Barrierefreiheit#

Die Komposition folgt dem WAI-ARIA-Date-Picker-Dialog-Beispiel: Das Popover verdrahtet den Trigger mit aria-expanded und aria-controls und gibt den Fokus beim Schließen zurück, während react-day-picker den Monat als grid beschrifteter Tageszellen mit wanderndem Tabindex rendert.

Tastaturinteraktionen: