Neumorphism UI

Calendar

用于需要在页面中持续显示的日期或范围选择。

预览

单日与日期范围

比较受控的单日和范围日历，查看选择值并清除范围。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/calendar

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

单日与日期范围

npx shadcn@latest add @neumorphism-ui/calendar @neumorphism-ui/button
Registry JSON

用法

选择模式，连接 selected 与 onSelect，并传入日期 locale。根据预约或日程规则设置禁选日期与月份边界。

"use client";

import { useState } from "react";
import { Calendar } from "@/components/ui/calendar";

export default function Example() {
  const [date, setDate] = useState<Date | undefined>();
  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

API 参考

使用 DayPicker v10 的日期计算和键盘导航。选中端点使用内凹效果，范围内部使用连续表面。

组件属性类型默认值说明
Calendarmode"single" | "multiple" | "range"—指定选择模式。
Calendarselected / onSelectDate | Date[] | DateRange / callback—连接选中值及更改回调。
Calendardisabled / locale / startMonth / endMonthDayPickerProps—设置禁用日期、语言及可导航月份。

无障碍

  • 01

    用方向键移动，用 Enter 或 Space 选择。

  • 02

    保留起止日期、今天和禁用日期的无障碍标签。