跳到正文
Linasan UI

Calendar 日历

选择一天或一个区间。周一开头,值是 YYYY-MM-DD 字符串。

2026 年 11 月
一二三四五六日

选中:2026-11-13

2026 年 11 月
一二三四五六日

区间:2026-11-03 ~ 2026-11-09

值和 <input type="date">、后端传的日期一样是 YYYY-MM-DD 字符串,toDateString / parseDateString 在 Date 和字符串之间转换。要放在输入框里弹出,用 DatePicker。

安装

pnpm dlx shadcn@latest add https://docs.linasan.cn/r/calendar.json

第一次装本站的组件前先在项目里执行一次 shadcn init,详见 安装。

用法

import { Calendar } from '@/components/ui/calendar';

const [day, setDay] = useState('2026-11-13');
<Calendar value={day} onChange={setDay} />
<Calendar mode="range" value={range} onChange={setRange} months={2} />

属性

属性

类型

本页目录