Вибір дати

"use client"

import * as React from "react"

Date picker — не єдиний примітив: він складається з компонентів Popover і Calendar, а сітку календаря обробляє react-day-picker; оформлений за рецептом необруталізму: товсті рамки, різкі тіні та масивний шрифт.

Коли це стане в пригоді:

• Бронювання та розклад — діапазони check-in/check-out, слоти зустрічей, дати доставки.
• Поля форм — дата народження, дедлайни, дати початку; поєднайте з полем для ручного вводу.
• Фільтри дашборда — вибір діапазону дат для аналітики, замовлень і звітів.

Встановлення#

Date Picker створюється за допомогою композиції компонентів <Popover /> та <Calendar />.

Перегляньте інструкції зі встановлення компонентів Popover та Calendar.

Використання#

Скопіювати"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>
  )
}

Докладніше див. у документації React DayPicker.

Композиція#

Вибір дати будується з Popover та Calendar (кореневого компонента DatePicker немає):

СкопіюватиPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Приклади#

Базовий#

Базовий компонент вибору дати.

"use client"

import * as React from "react"

Вибір діапазону#

Компонент вибору дати для вибору діапазону дат.

"use client"

import * as React from "react"

Дата народження#

Компонент вибору дати для вибору дати народження. Цей компонент містить макет заголовка з випадними списками для вибору дати й місяця.

"use client"

import * as React from "react"

Поле введення#

Компонент вибору дати з полем введення для вибору дати.

"use client"

import * as React from "react"

Вибір часу#

Компонент вибору дати з полем введення часу для вибору часу.

"use client"

import * as React from "react"

Вибір природною мовою#

Цей компонент використовує бібліотеку chrono-node для розбору дат природною мовою.

"use client"

import * as React from "react"

RTL#

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник з налаштування RTL.

"use client"

import * as React from "react"

Доступність#

Композиція відповідає прикладу WAI-ARIA Date Picker Dialog: Popover зв’язує тригер через aria-expanded і aria-controls і повертає фокус при закритті, а react-day-picker рендерить місяць як grid позначених клітинок днів із roving tabindex.

Клавіатурні взаємодії: