DatePicker 日期选择器

基于 Element Plus el-date-picker 的封装组件，提供日期、日期范围、月份、年份等多种选择模式，支持快捷选项和日期禁用。

基础用法

日期选择器基础用法 — 支持 date、daterange、month、year、week 等类型

日期选择 date

日期选择 + 快捷选项

日期范围 daterange

-

日期范围 + 快捷选项

-

月份 month

年份 year

周 week

禁用未来日期

值：{"date1":"","date2":"","date3":"","date4":"","date5":"","date6":"","dateRange1":["",""],"dateRange2":["",""]}

<template>
	<div class="demo-section">
		<p class="demo-title">日期选择 date</p>
		<HxDatePicker v-model="date1" type="date" placeholder="请选择日期" />

		<p class="demo-title">日期选择 + 快捷选项</p>
		<HxDatePicker v-model="date2" type="date" placeholder="请选择日期" :shortcuts="dateShortcuts" />

		<p class="demo-title">日期范围 daterange</p>
		<HxDatePicker v-model="dateRange1" type="daterange" />

		<p class="demo-title">日期范围 + 快捷选项</p>
		<HxDatePicker v-model="dateRange2" type="daterange" :shortcuts="dateShortcuts" />

		<p class="demo-title">月份 month</p>
		<HxDatePicker v-model="date3" type="month" placeholder="请选择月份" />

		<p class="demo-title">年份 year</p>
		<HxDatePicker v-model="date4" type="year" placeholder="请选择年份" />

		<p class="demo-title">周 week</p>
		<HxDatePicker v-model="date5" type="week" placeholder="请选择周" />

		<p class="demo-title">禁用未来日期</p>
		<HxDatePicker v-model="date6" type="date" placeholder="禁用未来日期" :disabledDate="disableFuture" />

		<p class="demo-title">值：{{ JSON.stringify({ date1, date2, date3, date4, date5, date6, dateRange1, dateRange2 }) }}</p>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { HxDatePicker } from "@whhx/ui"

const date1 = ref<string>("")
const date2 = ref<string>("")
const date3 = ref<string>("")
const date4 = ref<string>("")
const date5 = ref<string>("")
const date6 = ref<string>("")
const dateRange1 = ref<[string, string]>(["", ""])
const dateRange2 = ref<[string, string]>(["", ""])

const dateShortcuts = [
	{ text: "今天", value: () => new Date() },
	{ text: "昨天", value: () => {
		const d = new Date()
		d.setDate(d.getDate() - 1)
		return d
	}},
	{ text: "明天", value: () => {
		const d = new Date()
		d.setDate(d.getDate() + 1)
		return d
	}},
	{ text: "最近一周", value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
		return [start, end]
	}},
	{ text: "最近一个月", value: () => {
		const end = new Date()
		const start = new Date()
		start.setMonth(start.getMonth() - 1)
		return [start, end]
	}},
	{ text: "最近三个月", value: () => {
		const end = new Date()
		const start = new Date()
		start.setMonth(start.getMonth() - 3)
		return [start, end]
	}},
]

const disableFuture = (date: Date) => date.getTime() > Date.now()
</script>

<style scoped>
.demo-section {
	padding: 4px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.demo-title {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--el-text-color-secondary);
	font-weight: 500;
}
</style>

API

Props

参数	说明	类型	默认值
v-model / modelValue	选中的值	string | [string, string]	-
type	选择器类型	'date' | 'daterange' | 'datetime' | 'datetimerange' | 'month' | 'monthrange' | 'year' | 'week'	'date'
placeholder	占位文本（单个选择器）	string	-
start-placeholder	范围选择器开始占位文本	string	-
end-placeholder	范围选择器结束占位文本	string	-
format	显示格式	string	-
value-format	绑定值格式	string	-
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	true
disabled-date	禁用日期函数	(date: Date) => boolean	-
disable-future-time	禁用未来时间（仅 datetime 有效）	boolean	false
shortcuts	快捷选项（支持所有类型，范围类型返回 Date[]，单个类型返回 Date）	DateRangeShortcut[]	-
default-value	默认值	Date | [Date, Date]	-

DateRangeShortcut

属性	说明	类型
text	快捷选项文字	string
value	快捷选项值，范围类型为 Date | () => Date[]，单个类型为 Date | () => Date	Date | () => Date | Date[] | () => Date[]

Events

事件名	说明	回调参数
change	选中值变化时触发	(value: any)
update:modelValue	值更新时触发	(value: any)