日期选择器

一款弹出式日历，用于在表单和筛选器中选择单一日期、日期范围和生日——采用新粗野主义风格的边框和硬阴影效果。

"use client"

import * as React from "react"

日期选择器并不是单个基元——它把 Popover 和 Calendar 两个组件组合起来，日历网格由 react-day-picker 负责，并按新粗野主义的配方设计：粗边框、硬阴影、加粗字体。

适合以下场景：

预订与排期——入住/退房区间、预约时段、送达日期。
表单字段——出生日期、截止日期、开始日期；配上输入框还能手动键入。
仪表盘筛选——对分析数据、订单和报表做日期区间筛选。

安装

Date Picker 是由 <Popover /> 和 <Calendar /> 组件组合构建而成的。

请参阅 Popover 和 Calendar 组件的安装说明。

用法

components/example-date-picker.tsx

"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，其中每个日期单元格都带标注，并采用游走式 tabindex。

键盘交互：

按键	操作
`Space` / `Enter`（在触发器上）	打开弹出层
`ArrowLeft` / `ArrowRight`	把焦点移到前一天或后一天
`ArrowUp` / `ArrowDown`	把焦点移到上一周或下一周的同一天
`PageUp` / `PageDown`	切到上一个月或下一个月
`Shift + PageUp` / `Shift + PageDown`	切到上一年或下一年
`Home` / `End`	移到本周的第一天或最后一天
`Space` / `Enter`	选中当前聚焦的日期
`Escape`	关闭弹出层，并把焦点交还给触发器