Skip to content
On this page

组件库文档 tmui.design

日历 Calendar

显示日期。


🌶️ 日历 Calendar 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<tm-radio-group v-model="modeltype">
				<tm-radio value="day" label="按天"></tm-radio>
				<tm-radio value="week" color="red" label="按周"></tm-radio>
				<tm-radio value="month" color="blue" label="按月"></tm-radio>
				<tm-radio value="quarter" color="blue" label="按季度"></tm-radio>
				<tm-radio value="year" color="pink" label="按年"></tm-radio>
				<tm-radio value="rang" color="green" label="范围"></tm-radio>
			</tm-radio-group>
			<view>
				<tm-divider></tm-divider>
				<tm-checkbox v-if="modeltype == 'day'" v-model="multiple" label="多选日期"></tm-checkbox>
			</view>
			<tm-calendar-view :dateStyle="dateStyle" :multiple="multiple" color="green" :model="modeltype"></tm-calendar-view>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="弹层式,上方组件一致的用法"></tm-text>
			<tm-divider></tm-divider>
			<tm-radio-group v-model="modeltype">
				<tm-radio value="day" label="按天"></tm-radio>
				<tm-radio value="week" color="red" label="按周"></tm-radio>
				<tm-radio value="month" color="blue" label="按月"></tm-radio>
				<tm-radio value="quarter" color="blue" label="按季度"></tm-radio>
				<tm-radio value="year" color="pink" label="按年"></tm-radio>
				<tm-radio value="rang" color="green" label="范围"></tm-radio>
			</tm-radio-group>
		</tm-sheet>
		<tm-cell @click="showdate = true" title="请选择时间" :right-text="dateStr"></tm-cell>
		<tm-calendar
			format="YYYY年MM月DD日"
			:dateStyle="dateStyle"
			@click="test"
			:multiple="multiple"
			color="red"
			v-model:show="showdate"
			v-model:model-str="dateStr"
			:model="modeltype"
		></tm-calendar>
		<view style="height: 100rpx"></view>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmRadioGroup from '@/tmui/components/tm-radio-group/tm-radio-group.vue'
import tmRadio from '@/tmui/components/tm-radio/tm-radio.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmCell from '@/tmui/components/tm-cell/tm-cell.vue'
import tmCalendar from '@/tmui/components/tm-calendar/tm-calendar.vue'
import tmCalendarView from '@/tmui/components/tm-calendar-view/tm-calendar-view.vue'
import tmCheckbox from '@/tmui/components/tm-checkbox/tm-checkbox.vue'
const dateStyle = ref([
	{
		date: '2022-12-8', //日期
		text: false, //浅色背景。
		color: 'red', //主题色.
		extra: '测试' //额外的内容,在日期下方显示的文本。
	},
	{
		date: '2022-12-24', //日期
		text: false, //浅色背景。
		color: 'orange', //主题色.
		extra: '签到' //额外的内容,在日期下方显示的文本。
	}
])
const modeltype = ref('day')
const dateStr = ref('')
const showdate = ref(false)
const multiple = ref(false)
const test = (e: any) => {
	console.log(e, 'test')
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
showBooleanfalse显示,双向绑定,同v-model:show
defaultValueArray<String/Number/Date>[]默认值,数组
modelValueArray<String/Number/Date>[]绑定对象,同v-model
modelStrString''同v-model:model-str,单向绑定输出展示日期,此字段用来在页面上展示。只向外输出。
modelStringday日期模式:day : 单个日期选择模式(可多选,需要设置multiple=true; week :按周选择模式。month :按月选择模式。quarter:按季度选择。year :按年选择模式。rang :按日期范围选择模式。
colorStringprimary主题色
linearString''线性的
linearDeepStringlight-
start[String,Number,Date]''有效的可选时间,小于此时间,不允许选中。
end[String,Number,Date]''有效的可选时间,大于此时间,不允许选中。
disabledDateArray<String/Number/Date>[]被禁用的日期数组。如:["2022-1-1","2022-5-1"]
multipleBooleanfalse是否允许多选。
dateStyleArray<dateItemStyle>[]设定单个日期的样式,格式见下方。
maxNumber999当multiple=true时,可以选择的最大日期数量。
hideButtonv3.0.78+Booleanfalse是否隐藏底部按钮
hideToolv3.0.78+Booleanfalse是否隐藏头部工具栏
roundv3.0.78+Number0-25弹层圆角
formatv3.1.0+String'YYYY/MM/DD'针对modelStr的时间格式化输出
confirmTextString'确认'按钮文本
textUnitString['周次','一','二','三','四','五','六','日','本日','本周','本月','本季度','本年','月','第${x}季度','年']提示文本,请按顺序替换,不可少,也不可多。

dateItemStyle格式:

ts
export interface dateItemStyle {
    date?:string,//日期
    text?:boolean,//浅色背景。
    color?:string,//主题色.
    extra?:string,//额外的内容,在日期下方显示的文本。
}

🌹 事件

事件名参数返回数据描述
update:modelValue-modelValue绑定当前的时间。同v-model
update:modelStr--更新页面展示日期,v-model:model-str
update:show--更新显示状态,v-model:show
confirme: Array<string/number>-当点击确认时触发
clicke: Array<string/number>-日期被选中时触发,注意禁用的日期不会触发 。
changee: Array<string/number>-当切换年或者月的时候触发。
cancel--取消时触发
close--关闭时触发
open--打开函数

🌽 slot插槽

默认default

🌱 CalendarView参数

本组件含有公共属性 公共属性

参数名类型默认值描述
defaultValueArray<String/Number/Date>[]默认值,数组
modelValueArray<String/Number/Date>[]绑定对象,v-model:model
modelStrString''单向绑定输出展示日期,此字段用来在页面上展示。只向外输出。v-model:model-str
modelStringday日期模式:day : 单个日期选择模式(可多选,需要设置multiple=true; week :按周选择模式。month :按月选择模式。year :按年选择模式。rang :按日期范围选择模式。
colorStringprimary主题色
linearString''线性的
linearDeepStringlight-
start[String,Number,Date]''有效的可选时间,小于此时间,不允许选中。
end[String,Number,Date]''有效的可选时间,大于此时间,不允许选中。
disabledDateArray<String/Number/Date>[]被禁用的日期数组。如["2022-1-1","2022-5-1"]
multipleBooleanfalse是否允许多选
dateStyleArray<dateItemStyle>[]设定单个日期的样式,格式见上方
maxNumber999当multiple=true时,可以选择的最大日期数量
hideButtonv3.0.78+Booleanfalse是否隐藏底部按钮
hideToolv3.0.78+Booleanfalse是否隐藏头部工具栏
formatv3.1.0+String'YYYY/MM/DD'针对modelStr的时间格式化输出
confirmTextString'确认'按钮文本
textUnitString['周次','一','二','三','四','五','六','日','本日','本周','本月','本季度','本年','月','第${x}季度','年']提示文本,请按顺序替换,不可少,也不可多。

🌹 CalendarView事件

事件名参数返回数据描述
update:modelValue-modelValue绑定当前的时间。
update:modelStr--更新页面展示日期
confirme: Array<string/number>-当点击确认时触发
clicke: Array<string/number>-日期被选中时触发,注意禁用的日期不会触发 。
changee: Array<string/number>-当切换年或者月的时候触发。

🥗 ref方法

💏 文档贡献

此页文档由Sunlight贡献,如果对该框架感兴趣的可以参与我们一同进步!