日历

一款用于预订、排程和范围选择的月视图日期选择器——采用新粗野主义风格的边框和阴影设计。

July 2026

"use client"

import * as React from "react"

日历渲染一个月视图网格，用来选择单个日期、多个日期或一段区间。它基于 React DayPicker 构建——两套后端变体封装的是同一个库——并按新粗野主义的配方设计：粗边框、硬阴影、加粗字体。

适合以下场景：

表单日期字段——配上弹出层就是一个日期选择器，适合生日、截止日期和送达日期。
预订流程——mode="range" 处理入住/退房，disabled 屏蔽已经订走的日子。
仪表盘筛选——报表的日期区间、可用性视图，以及「最近 7 天」这类预设快捷项。

安装


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/calendar.json
npx shadcn@latest add https://neobrutalism.com/r/base/calendar.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/calendar.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/calendar.json

安装以下依赖项：


pnpm add react-day-picker date-fns
npm install react-day-picker date-fns
yarn add react-day-picker date-fns
bun add react-day-picker date-fns

将 `Button` 组件添加到您的项目中。

Calendar 组件使用了 Button 组件。请确保您已在项目中安装它。

将以下代码复制并粘贴到您的项目中。

components/ui/calendar.tsx

"use client"

import * as React from "react"
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from "lucide-react"
import {
  DayPicker,
  getDefaultClassNames,
  type DayButton,
  type Locale,
} from "react-day-picker"

import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  fixedWeeks = true,
  captionLayout = "label",
  buttonVariant = "ghost",
  locale,
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
}) {
  const defaultClassNames = getDefaultClassNames()

  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      fixedWeeks={fixedWeeks}
      className={cn(
        "group/calendar bg-card p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className
      )}
      captionLayout={captionLayout}
      locale={locale}
      formatters={{
        formatMonthDropdown: (date, dateLib) =>
          dateLib
            ? dateLib.format(date, "LLL")
            : date.toLocaleString(locale?.code, { month: "short" }),
        ...formatters,
      }}
      classNames={{
        root: cn("w-fit", defaultClassNames.root),
        months: cn(
          "relative flex flex-col gap-4 md:flex-row",
          defaultClassNames.months
        ),
        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
        nav: cn(
          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
          defaultClassNames.nav
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          "size-(--cell-size) rounded border-2 p-0 shadow-sm select-none aria-disabled:opacity-50",
          defaultClassNames.button_previous
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          "size-(--cell-size) rounded border-2 p-0 shadow-sm select-none aria-disabled:opacity-50",
          defaultClassNames.button_next
        ),
        month_caption: cn(
          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
          defaultClassNames.month_caption
        ),
        dropdowns: cn(
          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
          defaultClassNames.dropdowns
        ),
        dropdown_root: cn(
          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
          defaultClassNames.dropdown_root
        ),
        dropdown: cn(
          "absolute inset-0 bg-popover opacity-0",
          defaultClassNames.dropdown
        ),
        caption_label: cn(
          "font-head font-medium select-none",
          captionLayout === "label"
            ? "cn-calendar-caption text-sm"
            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
          defaultClassNames.caption_label
        ),
        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
        weekdays: cn("flex", defaultClassNames.weekdays),
        weekday: cn(
          "flex w-(--cell-size) items-center justify-center rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
          defaultClassNames.weekday
        ),
        week: cn("mt-2 flex w-full", defaultClassNames.week),
        week_number_header: cn(
          "w-(--cell-size) select-none",
          defaultClassNames.week_number_header
        ),
        week_number: cn(
          "text-[0.8rem] text-muted-foreground select-none",
          defaultClassNames.week_number
        ),
        day: cn(
          "group/day relative size-(--cell-size) rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
          props.showWeekNumber
            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
          defaultClassNames.day
        ),
        range_start: cn(
          "relative isolate z-0 rounded-l-(--cell-radius) bg-primary/30 after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-primary/30",
          defaultClassNames.range_start
        ),
        range_middle: cn("rounded-none", defaultClassNames.range_middle),
        range_end: cn(
          "relative isolate z-0 rounded-r-(--cell-radius) bg-primary/30 after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-primary/30",
          defaultClassNames.range_end
        ),
        today: cn(
          "rounded-(--cell-radius) border-2 border-primary text-foreground data-[selected=true]:rounded-none",
          defaultClassNames.today
        ),
        outside: cn(
          "text-muted-foreground aria-selected:text-muted-foreground",
          defaultClassNames.outside
        ),
        disabled: cn(
          "text-muted-foreground opacity-50",
          defaultClassNames.disabled
        ),
        hidden: cn("invisible", defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === "left") {
            return (
              <ChevronLeftIcon
                className={cn("cn-rtl-flip size-4", className)}
                {...props}
              />
            )
          }

          if (orientation === "right") {
            return (
              <ChevronRightIcon
                className={cn("cn-rtl-flip size-4", className)}
                {...props}
              />
            )
          }

          return (
            <ChevronDownIcon className={cn("size-4", className)} {...props} />
          )
        },
        DayButton: ({ ...props }) => (
          <CalendarDayButton locale={locale} {...props} />
        ),
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-(--cell-size) items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  locale,
  ...props
}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
  const defaultClassNames = getDefaultClassNames()

  const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

  return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={`${day.date.getFullYear()}-${String(
        day.date.getMonth() + 1
      ).padStart(2, "0")}-${String(day.date.getDate()).padStart(2, "0")}`}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        "relative isolate z-10 flex size-(--cell-size) flex-col items-center justify-center gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:outline-2 group-data-[focused=true]/day:outline-offset-2 group-data-[focused=true]/day:outline-primary data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:border-2 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-primary/30 data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:border-2 data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:border-2 data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
        defaultClassNames.day,
        className
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }

更新导入路径以匹配您的项目设置。

用法

import { Calendar } from "@/components/ui/calendar"

const [date, setDate] = React.useState<Date | undefined>(new Date())
 
return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded border-2 shadow-md"
  />
)

更多信息请参阅 React DayPicker 文档。

关于

Calendar 组件基于 React DayPicker 构建。

Date Picker

您可以使用 <Calendar> 组件构建日期选择器。更多信息请参阅 Date Picker 页面。

波斯 / 希吉来 / 贾拉利历

要使用波斯历，请编辑 components/ui/calendar.tsx，并将 react-day-picker 替换为 react-day-picker/persian。

- import { DayPicker } from "react-day-picker"
+ import { DayPicker } from "react-day-picker/persian"

خرداد ۱۴۰۴

ش	ی	د	س	چ	پ	ج

"use client"

import * as React from "react"

选中的日期（含时区）

Calendar 组件接受 timeZone 属性，以确保日期按用户的本地时区显示和选中。

export function CalendarWithTimezone() {
  const [date, setDate] = React.useState<Date | undefined>(undefined)
  const [timeZone, setTimeZone] = React.useState<string | undefined>(undefined)
 
  React.useEffect(() => {
    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
  }, [])
 
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      timeZone={timeZone}
    />
  )
}

注意： 如果您发现选中的日期有偏移（例如选择 20 号却高亮了 19 号），请确保 timeZone 属性已设置为用户的本地时区。

为什么在客户端进行？ 为确保与服务端渲染的兼容性，时区是在 useEffect 内使用 Intl.DateTimeFormat().resolvedOptions().timeZone 检测的。在渲染期间检测时区会导致水合不匹配，因为服务端和客户端可能处于不同的时区。

示例

基础

一个基础的日历组件。我们使用 className="rounded border-2 shadow-md" 为日历设置样式。

July 2026

"use client"

import { Calendar } from "@/components/ui/calendar"

范围日历

使用 mode="range" 属性启用范围选择。

January 2026

February 2026

"use client"

import * as React from "react"

月份和年份选择器

使用 captionLayout="dropdown" 显示月份和年份的下拉菜单。

July 2026

"use client"

import { Calendar } from "@/components/ui/calendar"

预设

July 2026

"use client"

import * as React from "react"

日期和时间选择器

July 2026

"use client"

import * as React from "react"

已预订的日期

January 2026

"use client"

import * as React from "react"

自定义单元格尺寸

December 2026

"use client"

import * as React from "react"

您可以使用 --cell-size CSS 变量来自定义日历单元格的尺寸。也可以通过使用特定断点的值让它变得响应式：

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded border-2 shadow-md [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>

或者使用固定值：

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded border-2 shadow-md [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>

周数

使用 showWeekNumber 来显示周数。

January 2026

	Su	Mo	Tu	We	Th	Fr	Sa
01
02
03
04
05
06

"use client"

import * as React from "react"

RTL

要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

有关启用波斯 / 希吉来 / 贾拉利历的方法，另请参阅希吉来历指南。

يوليو 2026

أحد	اثنين	ثلاثاء	أربعاء	خميس	جمعة	سبت

"use client"

import * as React from "react"

使用 RTL 时，请从 react-day-picker/locale 导入语言环境，并将 locale 和 dir 两个属性都传给 Calendar 组件：

import { arSA } from "react-day-picker/locale"
 
;<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  locale={arSA}
  dir="rtl"
/>

无障碍

日历沿用 WAI-ARIA Date Picker Dialog 模式里的网格导航模型：React DayPicker 把月份渲染成 role="grid"，每一天都是一个真正的按钮，并会把选中和禁用的日期播报给屏幕阅读器。两套后端变体封装的是同一个库，因此行为完全一致。

键盘交互：

按键	操作
`Tab` / `Shift + Tab`	在导航按钮和日期网格之间移动焦点
`ArrowLeft` / `ArrowRight`	把焦点移到前一天或后一天
`ArrowUp` / `ArrowDown`	把焦点移到上一周或下一周的同一个星期几
`Home` / `End`	把焦点移到本周的第一天或最后一天
`PageUp` / `PageDown`	切到上一个月或下一个月
`Shift + PageUp` / `Shift + PageDown`	切到上一年或下一年
`Space` / `Enter`	选中当前聚焦的日期

导入 `Locale` 类型。

在从 react-day-picker 的导入中添加 Locale：

  import {
    DayPicker,
    getDefaultClassNames,
    type DayButton,
+   type Locale,
  } from "react-day-picker"

为 Calendar 组件添加 `locale` 属性。

在组件的 props 中添加 locale 属性：

  function Calendar({
    className,
    classNames,
    showOutsideDays = true,
    captionLayout = "label",
    buttonVariant = "ghost",
+   locale,
    formatters,
    components,
    ...props
  }: React.ComponentProps<typeof DayPicker> & {
    buttonVariant?: React.ComponentProps<typeof Button>["variant"]
  }) {

将 `locale` 传给 DayPicker。

将 locale 属性传给 DayPicker 组件：

    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(...)}
      captionLayout={captionLayout}
+     locale={locale}
      formatters={{
        formatMonthDropdown: (date) =>
-         date.toLocaleString("default", { month: "short" }),
+         date.toLocaleString(locale?.code, { month: "short" }),
        ...formatters,
      }}

更新 CalendarDayButton 以接受 locale。

更新 CalendarDayButton 组件的签名并传入 locale：

  function CalendarDayButton({
    className,
    day,
    modifiers,
+   locale,
    ...props
- }: React.ComponentProps<typeof DayButton>) {
+ }: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {

更新 CalendarDayButton 中的日期格式化。

在日期格式化中使用 locale?.code：

    <Button
      variant="ghost"
      size="icon"
-     data-day={day.date.toLocaleDateString()}
+     data-day={day.date.toLocaleDateString(locale?.code)}
      ...
    />

将 locale 传给 DayButton 组件。

更新 DayButton 组件的用法以传入 locale 属性：

      components={{
        ...
-       DayButton: CalendarDayButton,
+       DayButton: ({ ...props }) => (
+         <CalendarDayButton locale={locale} {...props} />
+       ),
        ...
      }}

更新支持 RTL 的 CSS 类。

将方向性的类替换为逻辑属性，以获得更好的 RTL 支持：

  // In the day classNames:
- [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)
+ [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)
- [&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)
+ [&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)
- [&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)
+ [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)
 
  // In range_start classNames:
- rounded-l-(--cell-radius) ... after:right-0
+ rounded-s-(--cell-radius) ... after:end-0
 
  // In range_end classNames:
- rounded-r-(--cell-radius) ... after:left-0
+ rounded-e-(--cell-radius) ... after:start-0
 
  // In CalendarDayButton className:
- data-[range-end=true]:rounded-r-(--cell-radius)
+ data-[range-end=true]:rounded-e-(--cell-radius)
- data-[range-start=true]:rounded-l-(--cell-radius)
+ data-[range-start=true]:rounded-s-(--cell-radius)

应用这些更改后，您可以使用 locale 属性来提供特定语言环境的格式化：

import { enUS } from "react-day-picker/locale"
 
;<Calendar mode="single" selected={date} onSelect={setDate} locale={enUS} />

日历

安装

安装以下依赖项：

将 `Button` 组件添加到您的项目中。

将以下代码复制并粘贴到您的项目中。

更新导入路径以匹配您的项目设置。

用法

关于

Date Picker

波斯 / 希吉来 / 贾拉利历

选中的日期（含时区）

示例

基础

范围日历

月份和年份选择器

预设

日期和时间选择器

已预订的日期

自定义单元格尺寸

周数

RTL

无障碍

API 参考

更新日志

RTL 支持

导入 `Locale` 类型。

为 Calendar 组件添加 `locale` 属性。

将 `locale` 传给 DayPicker。

更新 CalendarDayButton 以接受 locale。

更新 CalendarDayButton 中的日期格式化。

将 locale 传给 DayButton 组件。

更新支持 RTL 的 CSS 类。

日历

安装以下依赖项：

将 Button 组件添加到您的项目中。

将以下代码复制并粘贴到您的项目中。

更新导入路径以匹配您的项目设置。

导入 Locale 类型。

为 Calendar 组件添加 locale 属性。

将 locale 传给 DayPicker。

更新 CalendarDayButton 以接受 locale。

更新 CalendarDayButton 中的日期格式化。

将 locale 传给 DayButton 组件。

更新支持 RTL 的 CSS 类。

将 `Button` 组件添加到您的项目中。

导入 `Locale` 类型。

为 Calendar 组件添加 `locale` 属性。

将 `locale` 传给 DayPicker。