مُنتقي التاريخ

"use client"

import * as React from "react"

منتقي التاريخ (date picker) ليس عنصرًا أساسيًا واحدًا — يركّب مكوّني Popover وCalendar، مع react-day-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 متنقّل.

تفاعلات لوحة المفاتيح: