t-picker-calendar

PickerCalendar 日历选择器

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <t-picker-calendar 
    v-model="selectedDate"
    label="请选择日期"
    @confirm="onConfirm">
  </t-picker-calendar>
</template>

<script setup>
const selectedDate = ref('')

function onConfirm(date: string) {
  console.log('选中的日期：', date)
}
</script>

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'

Events

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

Slots

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