Chọn ngày

"use client"

import * as React from "react"

Date picker không phải một primitive đơn lẻ — nó kết hợp các thành phần Popover và Calendar, với react-day-picker lo phần lưới lịch, tạo kiểu theo công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ đậm.

Nên dùng khi:

• Đặt chỗ và lên lịch — khoảng ngày nhận / ngày trả, khung giờ hẹn, ngày giao hàng.
• Trường trong form — ngày sinh, hạn chót, ngày bắt đầu; ghép với một input để nhập bằng cách gõ.
• Bộ lọc dashboard — chọn khoảng ngày cho số liệu phân tích, đơn hàng và báo cáo.

Cài đặt#

Date Picker được xây dựng bằng cách kết hợp các thành phần <Popover /> và <Calendar />.

Xem hướng dẫn cài đặt cho các thành phần Popover và Calendar.

Cách dùng#

Sao chép"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>
  )
}

Xem tài liệu React DayPicker để biết thêm thông tin.

Kết hợp#

Một trình chọn ngày được xây dựng từ Popover và Calendar (không có thành phần gốc DatePicker):

Sao chépPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Ví dụ#

Cơ bản#

Một thành phần chọn ngày cơ bản.

"use client"

import * as React from "react"

Trình chọn khoảng#

Một thành phần chọn ngày để chọn một khoảng ngày.

"use client"

import * as React from "react"

Ngày sinh#

Một thành phần chọn ngày để chọn ngày sinh. Thành phần này bao gồm một bố cục tiêu đề thả xuống để chọn ngày và tháng.

"use client"

import * as React from "react"

Ô nhập#

Một thành phần chọn ngày với một ô nhập để chọn một ngày.

"use client"

import * as React from "react"

Trình chọn giờ#

Một thành phần chọn ngày với một ô nhập giờ để chọn một giờ.

"use client"

import * as React from "react"

Trình chọn bằng ngôn ngữ tự nhiên#

Thành phần này dùng thư viện chrono-node để phân tích ngày tháng bằng ngôn ngữ tự nhiên.

"use client"

import * as React from "react"

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

Cách kết hợp này tuân theo ví dụ Date Picker Dialog của WAI-ARIA: Popover nối trigger với aria-expanded và aria-controls rồi trả focus về khi đóng, còn react-day-picker render tháng thành một grid gồm các ô ngày có nhãn với roving tabindex.

Tương tác bàn phím: