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

目录

基本使用

#日历模式

#单个日期模式

#多个日期模式

#日期范围模式

#自定义主题颜色

#自定义文案

#日期最大范围

#是否显示农历

#默认日期


基本使用

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

#Methods

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

#Event

事件名 说明 回调参数
confirm 日期选择完成后触发,若show-confirmtrue,则点击确认按钮后触发 选择日期相关的返回参数
close 日历关闭时触发 可定义页面关闭时的回调事件
相关推荐
切糕师学AI6 分钟前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
妄小闲25 分钟前
网页设计模板 HTML源码网站模板下载
前端·html
icebreaker41 分钟前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁1 小时前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊1 小时前
state和ref
前端·javascript·react.js
GEO_YScsn1 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing1 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_1 小时前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
摇滚侠1 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
Yuner20001 小时前
Webpack开发:从入门到精通
前端·webpack·node.js