日历

日历组件。

基础使用

• 通过 start-date 属性设置开始日期。
• 通过 end-date 属性设置结束日期。

<template>
	<pure-calendar
		start-date="2023-01-01"
		end-date="208-12-31"
	></pure-calendar>
</template>

选择类型

通过 select-type 属性设置选择类型。

• single: 选择单个日期
• multiple: 选择多个日期
• range: 选择日期范围

<template>
	<pure-calendar :select-type="type"></pure-calendar>
</template>

<script setup>
	import { ref } from "vue";

	// 选择模式
	const type = ref("single");
	const typeOptions = [
		{
			label: "选择单个日期",
			value: "single"
		},
		{
			label: "选择多个日期",
			value: "multiple"
		},
		{
			label: "选择日期区间",
			value: "range"
		}
	];
</script>

切换模式

通过 switch-mode 属性设置切换模式。

• none: 不显示切换按钮
• month: 显示月份切换按钮
• year: 切换年份、月份切换按钮

<template>
	<pure-calendar :switch-mode="mode"></pure-calendar>
</template>

<script setup>
	import { ref } from "vue";

	// 切换模式
	const mode = ref("year-month");
	const modeOptions = [
		{
			label: "无",
			value: "none"
		},
		{
			label: "按月切换",
			value: "month"
		},
		{
			label: "年月切换",
			value: "year-month"
		}
	];
</script>

周开始日

通过 week-start 属性设置周开始日，默认 0。

• 0: 周日
• 1: 周一
• 2: 周二
• 3: 周三
• 4: 周四
• 5: 周五
• 6: 周六

<template>
	<pure-calendar :week-start="firstDayOfWeek"></pure-calendar>
</template>

<script setup>
	import { ref } from "vue";

	// 一周开始日
	const firstDayOfWeek = ref(0);
	const firstDayOfWeekOptions = [
		{
			label: "周一",
			value: 1
		},
		{
			label: "周日",
			value: 0
		}
	];
</script>

禁用日期

通过 disabled-dates 属性设置禁用日期项。

<template>
	<pure-calendar :disabled-dates="disabledDates"></pure-calendar>
</template>

<script setup>
	import { ref } from "vue";

	// 禁用 2026-01-01、2026-01-02、2026-01-03
	const disabledDates = ref(["2026-01-01", "2026-01-02", "2026-01-03"]);
</script>

默认日期

通过 default-dates 属性设置默认日期项。值是一个数组。

<template>
	<pure-calendar :default-dates="defaultDates"></pure-calendar>
</template>

<script setup>
	import { ref } from "vue";

	// 默认选中 2026-01-01、2026-01-02、2026-01-03
	const defaultDates = ref(["2026-01-01", "2026-01-02", "2026-01-03"]);
</script>

自定义样式

通过默认 slot 自定义显示样式。

<template>
	<pure-calendar>
		<template #default="{ data: day }">
			<view class="item">
				<text class="day">{{ day.day }}日 </text>
				<text class="month">{{ day.month + 1 }}月 </text>
			</view>
		</template>
	</pure-calendar>
</template>

<style scoped lang="scss">
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.month {
			font-size: var(--pure-font-size-mini);
			opacity: var(--pure-opacity-hover);
		}
	}
</style>

弹窗使用

结合 <pure-popup /> 组件实现弹窗展示。

<template>
	<pure-cell
		title="选择日期"
		show-arrow
		desc="点击打开弹窗"
		@click="show = true"
	></pure-cell>

	<pure-popup
		:show="show"
		direction="bottom"
		@onClose="show = false"
	>
		<pure-calendar></pure-calendar>
	</pure-popup>
</template>

<script setup>
	import { ref } from "vue";

	// 弹窗
	const show = ref(false);
</script>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
showHeader	Boolean	true	是否显示头部
title	String	日历	标题
prevYearIconName	String	__arrow-left-double	上一年图标名称
nextYearIconName	String	__arrow-right-double	下一年图标名称
prevMonthIconName	String	__arrow-left	上一月图标名称
nextMonthIconName	String	__arrow-right	下一月图标名称
weekStart	Number	1	周开始日
startDate	[Date, Number, String]	一年前	开始日期
endDate	[Date, Number, String]	一年后	结束日期
currentDate	[Date, Number, String]	当前日期	默认展示的日期
selectType	String	single	选择类型
switchMode	String	year-month	切换模式
defaultDates	Array	[]	默认选中的日期
disabledDates	Array	[]	禁用的日期
readonlyDates	Boolean	false	是否只读
showMark	Boolean	true	是否显示月份背景水印
selectBackground	String		选中时的背景
selectTextColor	String		选中时的字体颜色

事件

名称	参数	说明
onSelect	dates[day]	选择事件

dates 是一个数组，按日期升序排序：

• signle：返回选择的日期数组
• multiple返回选择的日期数组
• range：数组的第一个元素是开始日期，第二个元素是结束日期

day 是一个对象，包含以下属性：

• year：当前年份
• month：当前月份（0-11）
• day：当前日期（1-31）
• date：当前日期对象

插槽

名称	参数	说明
#default	data = {year, month, day, date}	默认，日期项
#mark	data = {year, month, days, prevDays, nextDays}	月份背景水印

• year：当前年份
• month：当前月份（0-11）
• day：当前日期（1-31）
• date：当前日期对象
• days：当前月份的日期数组
• prevDays：补充的上一个月份的日期数组
• nextDays：补充的下一个月份的日期数组

样式变量

名称	说明
--pure-calendar-header-padding	头部内边距
--pure-calendar-title-font-size	标题字体大小
--pure-calendar-title-font-weight	标题字体粗细
--pure-calendar-title-color	标题字体颜色
--pure-calendar-topic-padding	顶部（切换按钮区域）内边距
--pure-calendar-button-gap	切换按钮间距
--pure-calendar-topic-text-font-size	顶部（切换按钮区域）字体大小
--pure-calendar-topic-text-font-weight	顶部（切换按钮区域）字体粗细
--pure-calendar-topic-text-color	顶部（切换按钮区域）字体颜色
--pure-calendar-button-disabled-opacity	切换按钮禁用时的透明度
--pure-calendar-week-padding	周文本内容内边距
--pure-calendar-body-height	日期体高度
--pure-calendar-day-padding	日期项内边距
--pure-calendar-day-radius	日期项圆角半径
--pure-calendar-day-transition	日期项过渡效果
--pure-calendar-day-disabled-color	禁用日期项字体颜色
--pure-calendar-day-disabled-opacity	禁用日期项透明度
--pure-calendar-day-selected-text-color	选中日期项字体颜色
--pure-calendar-day-selected-background	选中日期项背景
--pure-calendar-day-selected-opacity	选中日期项透明度
--pure-calendar-day-selected-middle-opacity	选中日期的区间项透明度
--pure-calendar-month-text-font-size	月份水印字体大小
--pure-calendar-month-text-font-weight	月份水印字体粗细
--pure-calendar-month-text-color	月份水印字体颜色
--pure-calendar-month-text-opacity	月份水印字体透明度