Skip to content
On this page

组件库文档 tmui.design

日历 Calendar

显示日期。


🌶️ 日历 Calendar 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="font-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="font-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)=>{
	console.log(e)
}
</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的时间格式化输出

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的时间格式化输出

🌹 CalendarView事件

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

🥗 ref方法

💏 文档贡献

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