# t-picker-calendar

PickerCalendar 日历选择器

t-picker-calendar 组件介绍

t-picker-calendar 是日历选择器弹窗组件，封装了日历组件和导航功能，支持日期选择、农历显示、节日标记等功能。

t-picker-calendar 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-picker-calendar 基础用法

基础用法参考 demo/picker-date/picker-date.uvue，通过 v-model 绑定选中的日期。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="PickerDate 日期选择"
				sub-title="采用自研 canvas flex布局引擎渲染,直接传入范围值进行渲染，只会循环绘制可见日期的内容，解决picker-view日期大范围卡的问题，示例从1900到3000年展示"></t-card>
		<view class="fl r-10 faic mb-15 h-40 plr-10">
			<t-text class="slh-30">当前日期： </t-text>
			<t-text-date>{{defaultDate}}</t-text-date>
		</view>
		<t-section title="默认值+日期限制(嵌入模式)"
				   class="mb-15 r-10"></t-section>
		<t-select-date class="r-10 mb-15"
					   :range="dateRange"
					   v-model="defaultDate"
					   @change="pickerChange">
		</t-select-date>
		<t-button class="mb-15"
				  type="primary"
				  @click="defaultDate='1986-11-02 12:35:40'">双向绑定测试</t-button>
		<t-col class="r-10 mb-15 p-10">
			<t-text class="slh-30">表单日期:{{curDate}}</t-text>
		</t-col>
		<t-section title="默认值+日期限制(弹窗模式)"
				   class="mb-15"></t-section>
		<t-select-date class="r-10 mb-15"
					   :embeddable="false"
					   v-model="curDate"
					   :range="dateRange">
		</t-select-date>
	<!-- 	<template #button>
			<t-button type="primary">请选择日期</t-button>
		</template> -->
		<t-button class="mb-15"
				  type="primary"
				  @click="curDate='1612959739000'">双向绑定测试</t-button>
	</view>
</template>

<script setup>
	const defaultDate = ref<string>('1612959739000') //1986-11-02 12:35:40 or 1612959739000
	const curDate = ref<string>('')
	const dateRange = ref<UTSJSONObject[]>([
		{
			type: 'year',
			name: '年',
			start: 1900,
			end: 2999
		},
		{
			type: 'month',
			name: '月',
			start: 1,
			end: 12
		},
		{
			type: 'date',
			name: '日',
			start: 1,
			end: 31
		}
		// ['hour', '时', [0, 23]], // 注意：小时通常是从0到23
		// ['minute', '分', [0, 59]], // 注意：分钟和秒通常是从0开始
		// ['second', '秒', [0, 59]] // 注意：这里我也假设了最大值为59，根据实际需要调整
	]);
	function pickerChange(e : string) {
		// console.log(e)
	}
	onUnload(() => {

	})
</script>

t-picker-calendar Props

属性名	说明	类型	默认值
modelValue	双向绑定的日期值	string[]	[]
title	标题	string	'日历'
label	标签文字	string	'请选择日期'
mode	日历模式	string	-
lunar	是否显示农历	boolean	false
festival	是否显示节日	boolean	false
startDate	开始日期	string	-
endDate	结束日期	string	-
selected	选中的日期列表	string[]	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'mini'

t-picker-calendar Events

事件名	说明	回调参数
confirm	点击确认按钮时触发	date: string
change	日期变化时触发	date: string

t-picker-calendar Slots

插槽名	说明
default	默认插槽，自定义触发按钮