t-calendar

Calendar 日历

组件介绍

t-calendar 是一个功能强大的日历选择组件，支持单日期选择、多日期选择、日期范围选择等多种模式，同时提供农历显示、节日显示、自定义选中日期标记和徽章等功能。组件采用 Canvas 绘制技术，性能优异，支持横向和纵向滑动切换月份，适用于各种日期选择场景。

平台兼容

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

基础用法

基础用法参考 demo/calendar/calendar.uvue，通过 mode 属性设置选择模式，使用 v-model 绑定选中日期。

<template>
  <!-- 单日期选择 -->
  <t-calendar mode="single" v-model="singleDate" class="mb-30"></t-calendar>
  <t-text>单日期选择: {{ singleDate }}</t-text>

  <!-- 多日期选择 -->
  <t-calendar mode="multiple" v-model="multipleDates" class="mb-30"></t-calendar>
  <t-text>多日期选择: {{ multipleDates }}</t-text>

  <!-- 日期范围选择 -->
  <t-calendar mode="range" v-model="rangeDates" class="mb-30"></t-calendar>
  <t-text>日期范围选择: {{ rangeDates }}</t-text>

  <!-- 显示农历和节日 -->
  <t-calendar mode="single" v-model="lunarDate" :lunar="true" :festival="true" class="mb-30"></t-calendar>
  <t-text>显示农历和节日: {{ lunarDate }}</t-text>

  <!-- 纵向滑动 -->
  <t-calendar mode="single" v-model="verticalDate" :vertical="true" class="mb-30"></t-calendar>
  <t-text>纵向滑动: {{ verticalDate }}</t-text>
</template>

<script setup>
const singleDate = ref([]);
const multipleDates = ref([]);
const rangeDates = ref([]);
const lunarDate = ref([]);
const verticalDate = ref([]);
</script>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
closeValidate	是否关闭验证	boolean	false
modelValue	绑定的日期值	string[]	[]
title	标题	string	'请选择日期'
mode	选择模式，可选 single、multiple、range	string	'range'
disableTouch	是否禁用触摸	boolean	false
vertical	是否启用竖向滑动	boolean	false
selected	自定义选中日期的配置	UTSJSONObject[]	[]
lunar	是否显示农历	boolean	true
showMonthBg	是否显示月份背景	boolean	true
monthShowCurrentMonth	是否只显示当前月份	boolean	false
festival	是否显示节日	boolean	true
startDate	开始日期	string	''
endDate	结束日期	string	''

Events

事件名	说明	回调参数
update:modelValue	绑定值变化时触发	string[]
select	选择日期时触发	CalendarDateType
change	日期变化时触发	string[]

Methods

方法名	说明	参数
prevMonth	切换到上一月	-
nextMonth	切换到下一月	-
prevYear	切换到上一年	-
nextYear	切换到下一年	-
resetSelection	重置选中的值	-
jumpToDate	跳转到指定日期	date: string (日期字符串，格式：YYYY-MM-DD)
getCurrentTime	获取当前显示的时间	-
setCurrentTime	设置当前显示的时间	time: string (日期字符串，格式：YYYY-MM-DD)