同名自定义tm-vuetify 2.0.1

tm-calendar 日历

特别注意

下方日历包含了:tm-calendar天日历 , tm-calendarView嵌入式天日历 , tm-monthCalendar月份日历 三个组件，注意区别。

🎉目录导航

👉使用方法,跟数1,2,3一样简单

<tm-calendar >
	<tm-button >打开日历</tm-button>
</tm-calendar>
1
2
3

👉农历日历

<tm-calendar :show-nongli="true">
	<tm-button  theme="bg-gradient-blue-accent">打开农历日历</tm-button>
</tm-calendar>
1
2
3

👉限定日期选择和指定日期的样式

<tm-button theme="bg-gradient-orange-accent">时间限定八月份</tm-button>
1
<script>
	export default {
		data() {
			return {
				// 下标文本设定.
				txt:[
					{date:'2021-8-20',text:"哈哈"},
					{date:'2021-8-21',text:"呵呵"},
					{date:'2021-8-22',text:"浪哈"},
					{date:'2021-8-23',text:"满员了"},
				],
				// 指定日期的样式 。
				dateClass:[
					{date:'2021-8-20',class:" red  text "},
					{date:'2021-8-21',class:" blue  text "},
					{date:'2021-8-22',class:" bg-gradient-blue-accent  "},
					{date:'2021-8-23',class:" green  "},
				]
			}
		},
		methods: {
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

👉月份日历

<tm-monthCalendar default-value="2021-8-24">
	<tm-button theme="bg-gradient-green-accent">月份日历</tm-button>
</tm-monthCalendar>
1
2
3

👉嵌入式日历

<tm-calendarView color="bg-gradient-pink-accent"></tm-calendarView>
1

👉所有日历示例集合

提醒

下面的例子展示了，业务中经常用到的日期下标指定文本，指定日期样式，指定时间范围选择等高频使用的功能
请注意高亮部分。

<template>
	<tm-fullView>
		<view>
			<tm-menubars title="日历" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-24 ">嵌入式弹层日历({{ceshit}})</view>
				<tm-calendar :defaultValue.sync="ceshit"   color="bg-gradient-blue-accent">
					<tm-button theme="bg-gradient-blue-accent">打开日历</tm-button>
				</tm-calendar>
				<tm-calendar :defaultValue.sync="ceshit"   :show-nongli="true">
					<tm-button  theme="bg-gradient-blue-accent">打开农历日历</tm-button>
				</tm-calendar>
			</tm-sheet>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-24 ">时间限定,指定日期样式,及范围模式</view>
				<tm-calendar :txt="txt" :selected-date-class="dateClass" color="bg-gradient-orange-accent" :defaultValue.sync="ceshitaa" time-start="2021-8-10" time-end="2021-8-31">
					<tm-button theme="bg-gradient-orange-accent">时间限定八月份</tm-button>
				</tm-calendar>
				
				<tm-calendar  :default-value.sync="ceshit" color="pink" mode="rang" :bing-start.sync="bts" :bing-end.sync="ets">
					<tm-button  theme="bg-gradient-pink-accent" >范围选择</tm-button>
				</tm-calendar>
			</tm-sheet>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-24 ">月份日历及暗黑模式</view>
				<tm-monthCalendar >
					<tm-button theme="bg-gradient-green-accent">月份日历</tm-button>
				</tm-monthCalendar>
				<tm-calendar black >
					<tm-button  >暗黑模式</tm-button>
				</tm-calendar>
			</tm-sheet>
			<tm-sheet :shadow="24" :padding="[0,0]">
				<view class="text-size-s text-weight-b pa-32 ">嵌入式日历</view>
				<tm-calendarView :default-value.sync="ceshit" :bing-start.sync="bts" :bing-end.sync="ets" color="bg-gradient-pink-accent"></tm-calendarView>
			</tm-sheet>
			
		</view>
	</tm-fullView>
	
</template>
















 
 
 
 
 
 
 



















1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
	export default {
		data() {
			return {
				ceshit:'2021-8-1',
				bts:'2021-8-10',
				ets:'2021-8-10',
				ceshitaa:'2021-8-10',
				// 下标文本设定.
				txt:[
					{date:'2021-8-20',text:"哈哈"},
					{date:'2021-8-21',text:"呵呵"},
					{date:'2021-8-22',text:"浪哈"},
					{date:'2021-8-23',text:"满员了"},
				],
				// 指定日期的样式 。
				dateClass:[
					{date:'2021-8-20',class:" red "},
					{date:'2021-8-21',class:" blue   "},
					{date:'2021-8-22',class:" bg-gradient-blue-accent  "},
					{date:'2021-8-23',class:" green  "},
				]
			}
		},
		methods: {
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

👉高级玩法

提示

使用无界面api创建日历，或者想做自定义的自己专属日历
文件位置 ```uni_modules>tm-vuetify>tool>function>calendar.js``
这个是一日历类，可完全定制api日历。只要使用new创建日历类就ok了。

👉tm-calendar日历的props属性表及事件

tm-calendar的props属性表

属性名称类型可选值默认值说明
modeStringday/rangdayday单选日期，rang范围选择日期
titleString-选择日期弹层层标题
btn-textString-确认底部按钮确认的文字
btn-colorString任意主题色名称primary底部按钮确认的背景颜色仅支持主题色名称,可不填写，默认使用color的主题
colorString任意主题色名称primary高亮主题
default-value.syncString-当前时间默认选中的时间，格式：2021-7-21，mode=day有效，,.sync为双向绑定
bing-end.syncString--范围结束时间当mode=rang时有效，格式：2021-7-21 ,.sync为双向绑定
bing-start.syncString--范围开始时间当mode=rang时有效，格式：2021-7-21 ,.sync为双向绑定
time-startString--日历时间可选范围开始日期格式'2021-7-21'
time-endString--日历时间可选范围结束日期格式'2021-7-21'
disabledBooleantrue/falsefalse是否禁用，只读
blackBooleantrue/falsefalse是否开启暗黑模式
valueBooleantrue/falsefalse显示日历组件推荐使用v-model，或者value.sync
show-nongliBooleantrue/falsefalse是否显示农历
formartArray-['年','月','日']时间的分割符
txtArray<object>true/falsefalse设置日期下标文本；格式[{date:'2021-7-21',text:"测试"}]
selected-date-classArray<object>true/falsefalse设置指定日期的样式类；格式[{date:'2021-7-21',class:"类名"}]

tm-calendar的事件表

事件名称返回参数返参类型说明
@confirmtiminfoObject按钮点击确认时触发。如果数据为空，则不触发。
@rang-start1.1.9*{start:timinfo,end:timinfo}Object日历为rang时间范围模式时，当设定开始时间触发
@rang-end1.1.9*{start:timinfo,end:timinfo}Object日历为rang时间范围模式时，当设定结束时间触发

timinfo格式如下：

{
	 beginEnd: false,//是否在规定范围时间内
	 day: 16,//日
	 month: 7,//月
	 nextMoth: false,//是否下月
	 nowDay: false,//是否当天
	 nowMonth: true,//是否当月
	 prevMoth: false,/是否下月
	 week: 5,//周1-7
	 week_text: "周五",//同上
	 year: 2021,//年
	 nongli:{ //农历
		 day: "初七",//日
		 jieqi: "",//节气
		 month: "六月",//月
		 shengxiao: "牛",//生肖
		 year: "辛丑" //农历年
	 }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

👉tm-calendarView嵌入式日历的props和事件

提醒

它与上方tm-calendar组件一脉相传，参数一致。
唯一不同的是：没有value和v-model显示弹层这个参数。其它一致。

👉tm-monthCalendar月份日历的props属性表及事件

tm-monthCalendar的props属性表

属性名称类型可选值默认值说明
btn-textString-确认底部按钮确认的文字
btn-colorString任意主题色名称primary底部按钮确认的背景颜色仅支持主题色名称,可不填写，默认使用color的主题
colorString任意主题色名称primary高亮主题
default-valueString-当前时间默认选中的时间，格式：2021-7-21或者2021-7
disabledBooleantrue/falsefalse是否禁用，只读
blackBooleantrue/falsefalse是否开启暗黑模式

tm-monthCalendar的事件表

事件名称返回参数返参类型说明
@confirmtiminfoObject按钮点击确认时触发。如果数据为空，则不触发。

timinfo格式如下：

{
	checked: true, //是否当前选中的月份
	index: 7,//月份索引
	month: 8,//月份
	text: "八月",//中文月份名称
	year: 2021 //年份
}
1
2
3
4
5
6
7

*timinfo格式如下：

{
	 beginEnd: false,//是否在规定范围时间内
	 day: 16,//日
	 month: 7,//月
	 nextMoth: false,//是否下月
	 nowDay: false,//是否当天
	 nowMonth: true,//是否当月
	 prevMoth: false,/是否下月
	 week: 5,//周1-7
	 week_text: "周五",//同上
	 year: 2021,//年
	 nongli:{ //农历
		 day: "初七",//日
		 jieqi: "",//节气
		 month: "六月",//月
		 shengxiao: "牛",//生肖
		 year: "辛丑" //农历年
	 }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑 报错？ | 评论？