uni-app实现日历效果:使用u-calendar设置最大可选时间，使用时间戳，点击确认选择之后以需要的格式返回页面上

u-calendar设置最大可选时间（max_date）

我写的样式大概是这样的：

• 选择位置：https://blog.csdn.net/qq_44429079/article/details/115826115

• 选择时间：点击后弹出日历样式，最大可选时间为当前时间的七天后，点击确定后页面的时间也随之改变

官方文档是这样的：

max-date="2022-01-01"这样的格式就可以

<u-calendar v-model="show" ref="calendar" @change="changeTime" :mode="mode" 
		:active-bg-color="activeBgColor" :btn-type="btnType" max-date="2022-01-01">
</u-calendar>

• 若要使最大可选日期为当前日期加上若干天，要使用时间戳
• 时间戳在线转换工具
• 在common下新建一个util.js的文件:

util.js内容为自己写的一些工具类，比如现在要用的时间戳转换：

import Vue from 'vue';

function navTo(url) {
	uni.navigateTo({
		url
	})
};
// type 1:将Thu Sep 20 2018 16:23:03 GMT+0800 (中国标准时间)转换为"2018-09-20 16:23:03"日期格式
// type 2:将Thu Sep 20 2018 16:47:52 GMT+0800 (中国标准时间)||2018-09-20 16:23:03||2018-09-20转换为1537433272051时间戳格式
// 不传入参数时，type默认取值1，inputTime默认取值new Date()
function formatDateTime(type = 1, inputTime) {
	if(typeof(inputTime)=='string'){inputTime=inputTime.replace(/-/g, '/')}
	var date = inputTime ? new Date(inputTime) : new Date();
	switch (type) {
		case 1:
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			m = m < 10 ? ('0' + m) : m;
			var d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			var h = date.getHours();
			h = h < 10 ? ('0' + h) : h;
			var minute = date.getMinutes();
			var second = date.getSeconds();
			minute = minute < 10 ? ('0' + minute) : minute;
			second = second < 10 ? ('0' + second) : second;
			return y + '-' + m + '-' + d + '-' + h + ':' + minute + ':' + second;
			break;
		case 2:
			// console.log(date,date.getTime())
			return date.getTime()
	}
};

需要在main.js里对util.js进行导入：

最后 在所需要的页面进行运用：

onLoad() {
			//slice是字符串切割方法截取0-10位的字符
			this.date=this.$util.formatDateTime().slice(5,10);
			//*1000是因为我这个util.formatDateTime方法返回的时间戳是以ms毫秒为单位的
			this.max_date=this.$util.formatDateTime(1,this.$util.formatDateTime(2)+ 60 * 60 * 24 * 7*1000).slice(0,10);
			
			// // 获取当前时间戳
			// this.date = Math.round(new Date() / 1000)
			// // 获取七日后时间戳
			// this.max_date = this.date + 60 * 60 * 24 * 7

		},

@change事件

在做完上面的事情后，我们得到的效果是这样的：

点击确定后发现我们页面上的时间并没有随之改变，是因为我们没有设置@change事件
官方文档对@change事件是这么解释的：

所以：
@change=“changeTime”

事件被触发后，打印一下e,发现我们想要的日期数据在result里，如图所示

所以我们只需要这样

changeTime(e) {
				// console.log(e)
				this.date = e.result.slice(5, 10)

			},