Datumpicker

"use client"

import * as React from "react"

De date picker is geen losse primitive — hij combineert de componenten Popover en Calendar, waarbij react-day-picker het kalenderraster verzorgt, vormgegeven volgens het neobrutalistische recept: dikke randen, harde schaduwen en vette typografie.

Gebruik deze component bij:

• Boeken en plannen — check-in/check-out-bereiken, afspraakslots, bezorgdatums.
• Formuliervelden — geboortedatum, deadlines, startdatums; combineer met een invoerveld voor getypte invoer.
• Dashboardfilters — datumbereiken selecteren voor analytics, bestellingen en rapporten.

Installatie#

De Date Picker is gebouwd met een compositie van de componenten <Popover /> en <Calendar />.

Zie de installatie-instructies voor de componenten Popover en Calendar.

Gebruik#

Kopiëren"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>
  )
}

Zie de React DayPicker-documentatie voor meer informatie.

Compositie#

Een datumkiezer wordt opgebouwd uit Popover en Calendar (er is geen DatePicker-hoofdcomponent):

KopiërenPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Voorbeelden#

Basis#

Een basis datumkiezer-component.

"use client"

import * as React from "react"

Bereikkiezer#

Een datumkiezer-component voor het selecteren van een bereik van datums.

"use client"

import * as React from "react"

Geboortedatum#

Een datumkiezer-component voor het selecteren van een geboortedatum. Dit component bevat een dropdown-koptekstindeling voor de selectie van dag en maand.

"use client"

import * as React from "react"

Invoerveld#

Een datumkiezer-component met een invoerveld voor het selecteren van een datum.

"use client"

import * as React from "react"

Tijdkiezer#

Een datumkiezer-component met een tijdinvoerveld voor het selecteren van een tijd.

"use client"

import * as React from "react"

Kiezer met natuurlijke taal#

Dit component gebruikt de chrono-node-bibliotheek om datums in natuurlijke taal te parsen.

"use client"

import * as React from "react"

RTL#

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid#

De compositie volgt het WAI-ARIA Date Picker Dialog-voorbeeld: de Popover koppelt de trigger met aria-expanded en aria-controls en geeft bij het sluiten de focus terug, terwijl react-day-picker de maand rendert als een grid van gelabelde dagcellen met een roving tabindex.

Toetsenbordinteracties: