انتخابگر تاریخ

"use client"

import * as React from "react"

Date picker یک primitive واحد نیست — کامپوننت‌های Popover و Calendar را ترکیب می‌کند، با react-day-picker برای شبکهٔ تقویم، و با دستور پخت نئوبروتالیستی استایل شده: حاشیه‌های ضخیم، سایه‌های سخت و تایپوگرافی پررنگ.

برای این موارد از آن استفاده کنید:

• رزرو و زمان‌بندی — بازهٔ ورود/خروج، اسلات قرار، تاریخ تحویل.
• فیلد فرم — تاریخ تولد، موعد، تاریخ شروع؛ با input برای ورود تایپی جفت کنید.
• فیلتر داشبورد — انتخاب بازهٔ تاریخ روی analytics، سفارش‌ها و گزارش‌ها.

نصب#

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 رندر می‌کند.

تعاملات صفحه‌کلید: