Pemilih tanggal

"use client"

import * as React from "react"

Date picker bukanlah satu primitif tunggal — ia mengomposisikan komponen Popover dan Calendar, dengan react-day-picker menangani grid kalendernya, ditata dengan resep neobrutalis: garis tepi tebal, bayangan keras, dan tipografi tebal.

Gunakan saat:

• Pemesanan dan penjadwalan — rentang check-in/check-out, slot janji temu, tanggal pengiriman.
• Kolom formulir — tanggal lahir, tenggat, tanggal mulai; padukan dengan input untuk pengetikan manual.
• Filter dasbor — pemilihan rentang tanggal untuk analitik, pesanan, dan laporan.

Instalasi#

Date Picker dibangun menggunakan komposisi dari komponen <Popover /> dan <Calendar />.

Lihat instruksi instalasi untuk komponen Popover dan Calendar.

Penggunaan#

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

Lihat dokumentasi React DayPicker untuk informasi lebih lanjut.

Komposisi#

Pemilih tanggal dibangun dari Popover dan Calendar (tidak ada komponen root DatePicker):

SalinPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Contoh#

Dasar#

Komponen pemilih tanggal dasar.

"use client"

import * as React from "react"

Pemilih Rentang#

Komponen pemilih tanggal untuk memilih rentang tanggal.

"use client"

import * as React from "react"

Tanggal Lahir#

Komponen pemilih tanggal untuk memilih tanggal lahir. Komponen ini menyertakan tata letak keterangan dropdown untuk pemilihan tanggal dan bulan.

"use client"

import * as React from "react"

Bidang Input#

Komponen pemilih tanggal dengan bidang input untuk memilih tanggal.

"use client"

import * as React from "react"

Pemilih Waktu#

Komponen pemilih tanggal dengan bidang input waktu untuk memilih waktu.

"use client"

import * as React from "react"

Pemilih Bahasa Alami#

Komponen ini menggunakan pustaka chrono-node untuk mengurai tanggal dalam bahasa alami.

"use client"

import * as React from "react"

RTL#

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas#

Komposisi ini mengikuti contoh Date Picker Dialog WAI-ARIA: Popover melengkapi pemicu dengan aria-expanded dan aria-controls serta mengembalikan fokus saat menutup, sementara react-day-picker merender bulan sebagai grid berisi sel hari berlabel dengan roving tabindex.

Interaksi keyboard: