Tarih seçici

"use client"

import * as React from "react"

Tarih seçici tek bir primitif değildir — Popover ve Calendar bileşenlerini bir araya getirir, takvim ızgarasını ise react-day-picker çizer; hepsi neobrütalist reçeteye göre biçimlendirilmiştir: kalın kenarlıklar, sert gölgeler ve koyu tipografi.

Şu durumlarda tercih edin:

• Rezervasyon ve planlama — giriş/çıkış aralıkları, randevu saatleri, teslimat tarihleri.
• Form alanları — doğum tarihi, son tarihler, başlangıç tarihleri; elle giriş için bir input ile eşleştirin.
• Pano filtreleri — analizler, siparişler ve raporlar üzerinde tarih aralığı seçimi.

Kurulum#

Date Picker, <Popover /> ve <Calendar /> bileşenlerinin bir kompozisyonu kullanılarak oluşturulur.

Popover ve Calendar bileşenlerinin kurulum talimatlarına bakın.

Kullanım#

Kopyala"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>
  )
}

Daha fazla bilgi için React DayPicker belgelerine bakın.

Kompozisyon#

Bir tarih seçici Popover ve Calendar'dan oluşturulur (bir DatePicker kök bileşeni yoktur):

KopyalaPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Örnekler#

Temel#

Temel bir tarih seçici bileşen.

"use client"

import * as React from "react"

Aralık Seçici#

Bir tarih aralığı seçmek için bir tarih seçici bileşen.

"use client"

import * as React from "react"

Doğum Tarihi#

Bir doğum tarihi seçmek için bir tarih seçici bileşen. Bu bileşen, tarih ve ay seçimi için bir açılır başlık düzeni içerir.

"use client"

import * as React from "react"

Giriş Alanı#

Bir tarih seçmek için bir giriş alanı içeren bir tarih seçici bileşen.

"use client"

import * as React from "react"

Saat Seçici#

Bir saat seçmek için bir saat giriş alanı içeren bir tarih seçici bileşen.

"use client"

import * as React from "react"

Doğal Dil Seçici#

Bu bileşen, doğal dildeki tarihleri ayrıştırmak için chrono-node kitaplığını kullanır.

"use client"

import * as React from "react"

RTL#

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik#

Bu kompozisyon, WAI-ARIA Date Picker Dialog örneğini izler: Popover, tetikleyiciyi aria-expanded ve aria-controls ile bağlar ve kapanışta odağı geri döndürür; react-day-picker ise ayı, gezinen tabindex'e sahip etiketli gün hücrelerinden oluşan bir grid olarak işler.

Klavye etkileşimleri: