Atelier UI

搜索组件…

搜索组件…

Date Range Picker

双月日历范围选择器,支持悬停预览、快捷预设和最小/最大日期。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

DateRangePickerProps

同时支持以下类型的全部属性: Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">

属性类型默认值说明
valueDateRange——
defaultValueDateRange——
onValueChange(range: DateRange) => void——
todaystringDEFAULT_TODAYISO date treated as "today" (highlighted and used by presets).
minstring—Earliest selectable ISO date
maxstring—Latest selectable ISO date
presetsbooleantrueShow the quick-range presets
placeholderstring"Pick a date range"—
align"start" | "end""start"Which edge of the trigger the popover aligns to
disabledbooleanfalse—
defaultOpenbooleanfalseOpens on first render without moving focus, handy for static previews

安装

$ npx shadcn@latest add https://chromotion.dev/r/date-range-picker.json

同类组件