演示

日历

Calendar 带响应式包装。type: raw | popover | drawer | automatic(默认 raw)。

用法

automatic 在桌面用 Popover、移动端用 Drawer。非 raw 时需传 trigger。

TSXcalendar
1import { Button, Calendar } from "@quan-erp/shared-ui"; 2import { Calendar as CalendarIcon } from "lucide-react"; 3 4// Raw (standard Shadcn) 5<Calendar mode="single" selected={date} onSelect={setDate} /> 6 7// Automatic responsive overlay 8<Calendar 9 type="automatic" 10 mode="single" 11 selected={date} 12 onSelect={setDate} 13 trigger={ 14 <Button variant="outline"> 15 <CalendarIcon className="mr-2 h-4 w-4" /> 16 {date ? date.toLocaleDateString() : "Pick a date"} 17 </Button> 18 } 19/>