uniapp中uview组件库丰富的Calendar 日历用法

2023-12-30 06:19:31

目录

基本使用

#日历模式

#单个日期模式

#多个日期模式

#日期范围模式

#自定义主题颜色

#自定义文案

#日期最大范围

#是否显示农历

#默认日期


基本使用

  • 通过show绑定一个布尔变量用于打开或收起日历弹窗。
  • 通过mode参数指定选择日期模式,包含单选/多选/范围选择。
<template>
	<view>
		<u-calendar :show="show"></u-calendar>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			}
		}
	}
</script>

#日历模式

  • modesingle只能选择单个日期
  • modemultiple可以选择多个日期
  • moderange可以选择日期范围

#单个日期模式

选择日期后,需要点击底部的确定按钮才能触发回调事件,回调参数为一个数组,有如下属性:

["2021-07-01"]

示例代码:

<template>
	<u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'single'
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

#多个日期模式

选择日期后,需要点击底部的确定按钮才能触发回调事件,回调参数为一个数组,有如下属性:

 ["2021-07-27", "2021-07-29", "2021-07-30"]

示例代码:

<template>
	<u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'multiple'
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

#日期范围模式

此模式用于选择一个日期范围,比如住酒店的入住到离店的日期范围,

此模式的返回参数如下:

["2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31"]

示例代码:

<template>
	<u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

#自定义主题颜色

组件可传入color参数,更改组件主题色

示例代码:

<template>
	<u-calendar :show="show" 
    color="#f56c6c" :mode="mode" @confirm="confirm"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

#自定义文案

组件可以通过formatter以函数的方式定义日期文案

注意:

微信小程序不支持通过props传递函数参数,所以组件内部暴露了一个setFormatter方法用于设置格式化方法,注意在页面的onReady生命周期获取ref再操作。

<template>
	<u-calendar 
        startText="住店"
        endText="离店"
        confirmDisabledText="请选择离店日期"
        :formatter="formatter"
        :show="show" 
        :mode="mode" 
        @confirm="confirm"
		ref="calendar"
	>
    </u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		onReady() {
			// 如果需要兼容微信小程序的话,需要用此写法
			this.$refs.calendar.setFormatter(this.formatter)
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if(day.month == month && day.day == date + 3)
				{
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
		    }
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

#日期最大范围

组件可以通过maxDate定义日期文案

<template>
	<u-calendar 
        :maxDate="maxDate"
        :show="show" 
        @confirm="confirm">
	</u-calendar>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				show: true,
				maxDate: `${year}-${month}-${date + 10}`,
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

#是否显示农历

组件可以通过showLunar定义是否显示农历

<template>
	<u-calendar 
        showLunar
        :show="show" 
        @confirm="confirm">
	</u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

#默认日期

组件可以通过defaultDate定义默认日期

<template>
	<u-calendar 
        :defaultDate="defaultDateMultiple"
        :show="show" 
        mode="multiple"
        @confirm="confirm">
	</u-calendar>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				show: true,
				defaultDateMultiple: [`${year}-${month}-${date}`, `${year}-${month}-${date + 1}`, `${year}-${month}-${date + 2}`],
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

API

#Props

参数说明类型默认值可选值
title标题内容String日期选择-
showTitle是否显示标题Booleantruefalse
showSubtitle是否显示副标题Booleantruefalse
mode日期类型选择Stringsinglemultiple-可以选择多个日期,range-选择日期范围(多个月需配合monthNum属性使用)
startTextmode=range时,第一个日期底部的提示文字String开始-
endTextmode=range时,最后一个日期底部的提示文字String结束-
customList自定义列表Array[][]
color主题色,对底部按钮和选中日期有效String#3c9cff-
minDate最小的可选日期Number | String0-
maxDate最大可选日期Number | String0-
defaultDate默认选中的日期,mode为multiple或range是必须为数组格式Array | String | Datenull-
maxCountmode=multiple时,最多可选多少个日期Number | StringNumber.MAX_SAFE_INTEGER-
rowHeight日期行高Number |String56-
formatter日期格式化函数(如需兼容微信小程序,则只能通过setFormatter方法)Functionnull-
showLunar是否显示农历Booleanfalsetrue
showMark是否显示月份背景色Booleantruefalse
confirmText确定按钮的文字String确定-
confirmDisabledText确认按钮处于禁用状态时的文字String确定-
show是否显示日历弹窗Booleanfalsetrue
closeOnClickOverlay是否允许点击遮罩关闭日历 (注意:关闭事件需要自行处理,只会在开启closeOnClickOverlay后点击遮罩层执行close回调)Booleanfalsetrue
readonly是否为只读状态,只读状态下禁止选择日期Booleanfalsetrue
maxRange日期区间最多可选天数,默认无限制,mode = range时有效Number | String无限制-
rangePrompt范围选择超过最多可选天数时的提示文案,mode = range时有效String | null选择天数不能超过 xx 天-
showRangePrompt范围选择超过最多可选天数时,是否展示提示文案,mode = range时有效Booleantruefalse
allowSameDay是否允许日期范围的起止时间为同一天,mode = range时有效Booleanfalsetrue
round圆角值,默认无圆角String | Number0-
monthNum?2.0.17最大展示的月份数量String | Number3-

#Methods

方法名说明
setFormatter为兼容微信小程序而暴露的内部方法,见上方说明

#Event

事件名说明回调参数
confirm日期选择完成后触发,若show-confirmtrue,则点击确认按钮后触发选择日期相关的返回参数
close日历关闭时触发可定义页面关闭时的回调事件

文章来源:https://blog.csdn.net/m0_72603435/article/details/135282132
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。