בורר תאריך

"use client"

import * as React from "react"

ה-date picker אינו פרימיטיב יחיד — הוא מרכיב את רכיבי Popover ו-Calendar, כש-react-day-picker מטפל ברשת הלוח, מעוצב לפי המתכון הנאו-ברוטליסטי: מסגרות עבות, צללים חדים וטיפוגרפיה מודגשת.

השתמשו בו כש:

• הזמנות ותזמון — טווחי check-in/check-out, משבצות פגישות, תאריכי משלוח.
• שדות טופס — תאריך לידה, דדליינים, תאריכי התחלה; חברו לשדה להקלדה ידנית.
• מסנני לוח מחוונים — בחירת טווח תאריכים מעל analytics, הזמנות ודוחות.

התקנה#

בורר התאריכים בנוי מקומפוזיציה של הרכיבים <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"

נגישות#

הקומפוזיציה עוקבת אחרי דוגמת Date Picker Dialog של WAI-ARIA: ה-Popover מחבר את הטריגר עם aria-expanded ו-aria-controls ומחזיר מוקד בסגירה, בעוד react-day-picker מרנדר את החודש כ-grid של תאי יום עם תוויות ועם roving tabindex.

אינטראקציות מקלדת: