दिनांक पिकर

"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#

Neobrutalism में RTL सपोर्ट सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें.

"use client"

import * as React from "react"

एक्सेसिबिलिटी#

यह कंपोज़िशन WAI-ARIA Date Picker Dialog उदाहरण का पालन करती है: Popover ट्रिगर को aria-expanded और aria-controls से जोड़ता है और बंद होने पर फ़ोकस लौटाता है, जबकि react-day-picker महीने को लेबल वाले दिन सेल के grid के रूप में रेंडर करता है, roving tabindex के साथ।

कीबोर्ड इंटरैक्शन: