日期选择器

日期选择器组件。

基础使用

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

<template>
	<pure-date-picker :date="date"></pure-date-picker>
</template>

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

	// 值
	const date = ref("2026-11-22");
</script>

值

• 通过 date 属性设置值

提示

必须是可以被 new Date() 的值

<template>
	<pure-date-picker
		:date="date"
		@onOk="onOk"
	></pure-date-picker>
</template>

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

	// 值
	const date = ref("2026-11-22");
	// const date = ref("2026-11");
	// const date = ref("2026");

	// 确认事件
	function onOk(dateStr, items) {
		date.value = dateStr;
	}
</script>

显示列数

通过 cols 属性设置显示的列数，默认显示 1 列。

<template>
	<!-- 2 列显示年月，1列只显示年 -->
	<pure-date-picker :cols="2"></pure-date-picker>
</template>

显示行数

通过 rows 属性设置显示的行数，默认显示 8 行。

<template>
	<pure-date-picker :rows="6"></pure-date-picker>
</template>

标签格式化

通过 formatter 属性设置标签格式化函数，该函数有两个参数：

• num: 年、月、日对应的数字
• type: 数字类型。year：年；month：月；day：日；

<template>
	<pure-date-picker
		:date="date"
		:formatter="formatter"
	></pure-date-picker>
</template>

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

	// 值
	const date = ref("2026-11-22");

	// 格式化显示文本
	function formatter(num, type) {
		if (type === "year") return `${num}--年`;
		if (type === "month") return `${num}--月`;
		if (type === "day") return `${num}--日`;
		return num;
	}
</script>

属性

名称	类型	默认值	说明
date	[String, Number, Date]		值
startDate	[String, Number, Date]		起始日期
endDate	[String, Number, Date]		结束日期
formatter	Function		标签格式化函数
labelKey	String	label	字段标签 key
valueKey	String	label	字段值 key
childrenKey	String	label	字段子数据 key
rowHeight	String	3em	行的高度
rows	Number	8	显示的行数
cols	Number	1	显示的列数
hoverClass	String	pure-hover	按下去的样式类
show	Boolean	false	显示状态
mask	Boolean	false	是否显示遮罩
maskClickable	Boolean	true	遮罩是否可点击关闭
title	String		标题
showNot	Boolean	true	是否显示顶部取消按钮
notlText	String	关闭	顶部取消按钮文本
notTheme	String	info	顶部取消按钮主题
notOpts	Object	{}	顶部取消按钮配置项 参考
showOk	Boolean	true	是否显示顶部确认按钮
okText	String	确定	顶部确认按钮文本
okTheme	String	primary	顶部确认按钮主题
okOpts	Object	{}	顶部确认按钮配置项 参考
showCancel	Boolean	false	是否显示底部取消按钮
cancelText	String	取消	底部取消按钮文本
cancelTheme	String	info	底部取消按钮主题
cancelOpts	Object	{}	底部取消按钮配置项 参考
showConfirm	Boolean	false	是否底部显示确认按钮
confirmText	String	确认	底部确认按钮文本
confirmTheme	String	primary	底部确认按钮主题
confirmOpts	Object	{}	底部确认按钮配置项 参考
scrollable	Boolean	true	内容是否可滚动
headerLine	Boolean	false	是否显示 Header 下边框
footerLine	Boolean	false	是否显示 Footer 上边框
buttonLine	Boolean	false	是否显示底部按钮分割线
width	String		宽度
height	String		高度
maxWidth	String		最大宽度
maxHeight	String		最大高度

事件

名称	参数	说明
onClose		点击遮罩关闭事件
onNot		顶部取消按钮点击事件
onOk	dateStr: 日期字符串; items: 日期数据	顶部确认按钮点击事件
onCancel		底部取消按钮点击事件
onConfirm	dateStr: 日期字符串; items: 日期数据	底部确认按钮点击事件
onChange	dateStr: 日期字符串; items: 日期数据	滚动切换事件