Date Range Picker
在行内或浮动日历中选择日期区间的起点与终点。
适用场景
- 当界面需要以下行为时使用 Date Range Picker：在行内或浮动日历中选择日期区间的起点与终点。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/date-range-picker.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
packages/vue/src/motion/date-range-picker/demo.vue
<script setup lang="ts">
import {
DateRangePicker,
DateRangePickerCalendar,
DateRangePickerClear,
DateRangePickerContent,
DateRangePickerFooter,
DateRangePickerGrid,
DateRangePickerHeader,
DateRangePickerSelection,
DateRangePickerTrigger,
} from "@/components/orvui/motion/date-range-picker";
const reporting = {
label: "Reporting period",
defaultMonth: "2026-10-25",
defaultValue: { from: "2026-10-19", to: "2026-10-25" },
max: "2026-10-25",
};
</script>
<template>
<DateRangePicker v-bind="reporting"
><DateRangePickerTrigger /><DateRangePickerContent
><DateRangePickerCalendar class="w-full rounded-none border-0"
><DateRangePickerHeader /><DateRangePickerGrid /><DateRangePickerFooter
><div class="flex items-center justify-between gap-2">
<DateRangePickerSelection /><DateRangePickerClear /></div></DateRangePickerFooter></DateRangePickerCalendar></DateRangePickerContent
></DateRangePicker>
</template>
packages/vue/src/motion/date-range-picker/src/DateRangePicker.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
DateRangePicker | v-modelnull | DateRange | update:modelValue |
DateRangePicker | v-model:openboolean | update:open |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
DateRangePicker
modelValue?null | DateRange—value?null | DateRange—defaultValue?null | DateRangenulldefaultMonth?stringvalue.value?.frommin?string"0000-01-01"max?string"9999-12-31"isDateDisabled?(date: string) => boolean—presets?DateRangePreset[]—locale?string"en-US"label?string"Choose a date range"disabled?booleanfalseautoFocus?booleanfalseshowSummary?booleantrueopen?booleanundefineddefaultOpen?booleanfalsecloseOnSelect?booleanfalse事件
update:modelValue—@update:modelValuevalueChange—@valueChangechange—@changeupdate:open—@update:openopenChange—@openChange插槽
default—作用域参数: value, select-date, clear
#defaultDateRangePickerCalendar
showSummary?booleanundefined插槽
default() => VNodeChild#defaultDateRangePickerClear
disabled?booleanfalse插槽
default() => VNodeChild#defaultDateRangePickerContent
autoFocus?booleantrueonOpenAutoFocus?(content: HTMLDivElement) => void—插槽
default() => VNodeChild#defaultDateRangePickerFooter
插槽
default(props: {}) => any#defaultDateRangePickerSelection
插槽
default—作用域参数: value
#defaultDateRangePickerTrigger
placeholder?string"Select dates"disabled?booleanfalse插槽
default() => VNodeChild#defaultDateRangePickerPresets
插槽
default() => VNodeChild#defaultDateRangePickerPreset
valueDateRange—label?stringroot.value?.textContent?.trim()disabled?booleanfalse插槽
default() => VNodeChild#default无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Date Range Picker？
- 通过 modelValue、value、defaultValue、defaultMonth、min、max、isDateDisabled、presets、locale、label、disabled、autoFocus、showSummary、open、defaultOpen、closeOnSelect 配置 Date Range Picker；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 update:modelValue、valueChange、change、update:open、openChange，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1