Wybór daty

"use client"

import * as React from "react"

Date picker nie jest pojedynczym prymitywem — to kompozycja komponentów Popover i Calendar, w której siatką kalendarza zajmuje się react-day-picker, ostylowana zgodnie z neobrutalistyczną recepturą: grube obramowania, twarde cienie i wyrazista typografia.

Sięgnij po ten komponent, gdy:

• Rezerwacje i planowanie — zakresy zameldowania i wymeldowania, terminy wizyt, daty dostaw.
• Pola formularzy — data urodzenia, terminy, daty rozpoczęcia; połącz z polem tekstowym, aby dało się też wpisać datę ręcznie.
• Filtry na pulpitach — wybór zakresu dat w analityce, zamówieniach i raportach.

Instalacja#

Date Picker jest zbudowany przy użyciu kompozycji komponentów <Popover /> i <Calendar />.

Zobacz instrukcje instalacji komponentów Popover i Calendar.

Użycie#

Kopiuj"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>
  )
}

Więcej informacji znajdziesz w dokumentacji React DayPicker.

Kompozycja#

Komponent wyboru daty jest zbudowany z Popover i Calendar (nie istnieje główny komponent DatePicker):

KopiujPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Przykłady#

Podstawowy#

Podstawowy komponent wyboru daty.

"use client"

import * as React from "react"

Wybór zakresu#

Komponent wyboru daty do wybierania zakresu dat.

"use client"

import * as React from "react"

Data urodzenia#

Komponent wyboru daty do wybierania daty urodzenia. Ten komponent zawiera układ nagłówka z listami rozwijanymi do wyboru daty i miesiąca.

"use client"

import * as React from "react"

Pole wprowadzania#

Komponent wyboru daty z polem wprowadzania do wybierania daty.

"use client"

import * as React from "react"

Wybór czasu#

Komponent wyboru daty z polem wprowadzania czasu do wybierania godziny.

"use client"

import * as React from "react"

Wybór w języku naturalnym#

Ten komponent korzysta z biblioteki chrono-node do analizowania dat w języku naturalnym.

"use client"

import * as React from "react"

RTL#

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność#

Kompozycja realizuje przykład WAI-ARIA Date Picker Dialog: Popover spina wyzwalacz atrybutami aria-expanded i aria-controls i zwraca fokus przy zamknięciu, a react-day-picker renderuje miesiąc jako siatkę grid opisanych komórek dni z wędrującym tabindexem.

Obsługa klawiatury: