Выбор даты

"use client"

import * as React from "react"

Выбор даты — не отдельный примитив: он собирается из компонентов Popover и Calendar, где сетку месяца рисует react-day-picker, и оформлен по рецепту необрутализма: толстые рамки, жёсткие тени и жирный шрифт.

Когда это пригодится:

• Бронирование и планирование — диапазоны заезда и выезда, слоты для записи, даты доставки.
• Поля форм — дата рождения, дедлайны, даты начала; рядом с полем ввода дату можно набрать руками.
• Фильтры на панелях — выбор диапазона дат в аналитике, заказах и отчётах.

Установка#

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 из подписанных ячеек-дней с перемещающимся tabindex.

Управление с клавиатуры: