RangeCalendar 日期范围选择器

RangeCalendar 组件用于选择日期范围，提供直观的日历界面，支持选择开始日期和结束日期，适用于预订系统、报表筛选等场景。

Storybook

引入

import { RangeCalendar } from '@versakit/vue'

使用

loading

基础用法

基础的日期范围选择器，点击选择开始日期和结束日期。

<template>
	<RangeCalendar v-model="dateRange" />
</template>

<script setup>
import { ref } from 'vue'

const dateRange = ref([null, null])
</script>

默认选中日期

通过 v-model 设置默认选中的日期范围。

<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 属性限制可选择的日期范围。

<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 属性设置组件为禁用状态。

<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 属性设置组件为只读状态。

<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 属性设置周一为一周的第一天。

<template>
	<RangeCalendar v-model="dateRange" :first-day-of-week="1" />
</template>

<script setup>
import { ref } from 'vue'

const dateRange = ref([null, null])
</script>

本地化设置

通过 locale 属性设置日历的本地化显示。

<template>
	<RangeCalendar v-model="dateRange" locale="zh-CN" />
</template>

<script setup>
import { ref } from 'vue'

const dateRange = ref([null, null])
</script>

自定义样式

使用 pt 属性自定义组件样式。

<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 属性移除默认样式，完全自定义组件外观。

<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)	年份变更时触发

Slots