RangeCalendar 日期范围选择器
RangeCalendar 组件用于选择日期范围,提供直观的日历界面,支持选择开始日期和结束日期,适用于预订系统、报表筛选等场景。
引入
typescript
import { RangeCalendar } from '@versakit/vue'
使用
loading
基础用法
基础的日期范围选择器,点击选择开始日期和结束日期。
vue
<template>
<RangeCalendar v-model="dateRange" />
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([null, null])
</script>
默认选中日期
通过 v-model
设置默认选中的日期范围。
vue
<template>
<RangeCalendar v-model="dateRange" />
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([new Date(2023, 0, 15), new Date(2023, 0, 20)])
</script>
日期范围限制
通过 min-date
和 max-date
属性限制可选择的日期范围。
vue
<template>
<RangeCalendar
v-model="dateRange"
:min-date="new Date(2023, 0, 1)"
:max-date="new Date(2023, 11, 31)"
/>
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([null, null])
</script>
禁用状态
通过 disabled
属性设置组件为禁用状态。
vue
<template>
<RangeCalendar v-model="dateRange" disabled />
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([new Date(2023, 0, 15), new Date(2023, 0, 20)])
</script>
只读状态
通过 readonly
属性设置组件为只读状态。
vue
<template>
<RangeCalendar v-model="dateRange" readonly />
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([new Date(2023, 0, 15), new Date(2023, 0, 20)])
</script>
周一作为一周的第一天
通过 first-day-of-week
属性设置周一为一周的第一天。
vue
<template>
<RangeCalendar v-model="dateRange" :first-day-of-week="1" />
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([null, null])
</script>
本地化设置
通过 locale
属性设置日历的本地化显示。
vue
<template>
<RangeCalendar v-model="dateRange" locale="zh-CN" />
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([null, null])
</script>
自定义样式
使用 pt
属性自定义组件样式。
vue
<template>
<RangeCalendar
v-model="dateRange"
:pt="{
root: 'border border-gray-300 rounded-md overflow-hidden',
header: 'bg-blue-50',
title: 'text-blue-700 font-bold',
weekDay: 'text-blue-500',
day: {
selected: 'bg-blue-500 text-white hover:bg-blue-600',
inRange: 'bg-blue-100',
today: 'border-blue-500',
},
}"
/>
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([null, null])
</script>
无样式模式
通过 unstyled
属性移除默认样式,完全自定义组件外观。
vue
<template>
<RangeCalendar
v-model="dateRange"
unstyled
:pt="{
root: 'border border-gray-200 rounded-lg p-4',
header: 'flex justify-between items-center mb-4',
title: 'text-lg font-medium text-gray-800',
monthNavPrev: 'p-1 rounded-full hover:bg-gray-100',
monthNavNext: 'p-1 rounded-full hover:bg-gray-100',
weekDays: 'grid grid-cols-7 mb-2',
weekDay: 'text-center text-sm font-medium text-gray-500',
days: 'grid grid-cols-7 gap-1',
day: {
root: 'flex items-center justify-center h-8 w-8 rounded-full',
today: 'border border-blue-500',
selected: 'bg-blue-500 text-white',
inRange: 'bg-blue-100',
disabled: 'text-gray-300 cursor-not-allowed',
adjacent: 'text-gray-400',
},
}"
/>
</template>
<script setup>
import { ref } from 'vue'
const dateRange = ref([null, null])
</script>
API
Props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
modelValue | [Date, Date] | - | 选中的日期范围 |
minDate | Date | - | 最小可选日期 |
maxDate | Date | - | 最大可选日期 |
disabled | boolean | false | 是否禁用 |
readonly | boolean | false | 是否只读 |
firstDayOfWeek | number | 0 | 一周的第一天,0 表示周日 |
locale | string | 'en-US' | 本地化设置 |
unstyled | boolean | false | 是否移除默认样式 |
pt | RangeCalendarPT | - | 传递样式类 |
Events
名称 | 参数 | 说明 |
---|---|---|
update:modelValue | ([Date, Date]) | 日期范围变更时触发 |
select | (date: Date) | 选择日期时触发 |
month-change | (month: number, year: number) | 月份变更时触发 |
year-change | (year: number) | 年份变更时触发 |