Skip to content

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-datemax-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]-选中的日期范围
minDateDate-最小可选日期
maxDateDate-最大可选日期
disabledbooleanfalse是否禁用
readonlybooleanfalse是否只读
firstDayOfWeeknumber0一周的第一天,0 表示周日
localestring'en-US'本地化设置
unstyledbooleanfalse是否移除默认样式
ptRangeCalendarPT-传递样式类

Events

名称参数说明
update:modelValue([Date, Date])日期范围变更时触发
select(date: Date)选择日期时触发
month-change(month: number, year: number)月份变更时触发
year-change(year: number)年份变更时触发

Slots