index.js:235 uView提示：maxDate不能小于当前时间

ThridTianFuStreet小貂蝉

于 2024-03-27 12:00:01 发布

阅读量805

点赞数 21

分类专栏： Uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/Blues_han/article/details/137073033

版权

Uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

组件不合理的提示。我就是不想让他maxDate选择未来时间。

需求：用uview的calendar做一个时间段的选择，当设置maxDate为今天，遇到这个无理的提示。

1、找到calendar组件源码提示位置

在这里插入图片描述

2、注释掉这段代码

在这里插入图片描述

3、看效果

在这里插入图片描述

我的代码

<template>
	<view class="container">
		<view class="top">
			<view class="timebox" @click="show=true">
				<view class="date">
					{{ showData }}
				</view>
				<u-icon bold name="calendar" color="#F5DA43" size="44"></u-icon>
			</view>
		</view>
		<u-calendar 
			:show="show" 
			mode="range" 
			@confirm="confirm" 
			@close="close" 
			:defaultDate="defaultDate" 
			allowSameDay 
			:minDate="chooseRange[0]" 
			:maxDate="chooseRange[1]" 
			monthNum="10"
			:rowHeight="110" 
			closeOnClickOverlay round="10" >
			</u-calendar>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				show:true,
				dateArr:[],
				defaultDate:""
			}
		},
		onLoad(){
			// 默认查昨天到今天
			this.defaultDate = [this.$dayjs().subtract(1,'day').format("YYYY-MM-DD"),this.$dayjs().format("YYYY-MM-DD")];
			this.dateArr = [this.$dayjs().subtract(1,'day').format("YYYY-MM-DD"),this.$dayjs().format("YYYY-MM-DD")];
		},
		computed:{
			// 过滤显示时间
			showData(){
				return  this.$dayjs(this.dateArr[0]).format("YYYY/MM/DD")+'-'+this.$dayjs(this.dateArr[this.dateArr.length-1]).format("YYYY/MM/DD");
			},
			// 可选时间范围
			chooseRange(){
				return [this.$dayjs().subtract(1,'month').format("YYYY-MM-DD"),this.$dayjs().format("YYYY-MM-DD")]
			}
		},
		methods:{
			confirm(dateArr){
				this.dateArr = [dateArr[0],dateArr[dateArr.length-1]];
				console.log(this.dateArr); //  获取到我想要的两个日期
				this.show=false;
			},
			close(){
				this.show=false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		margin: 30rpx;
		padding:20rpx;
		box-sizing: border-box;
		background: #fff;
	}
	.top{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		.label{
			margin-right: 20rpx;
		}
		.timebox{
			padding:6rpx 16rpx;
			color:#999;
			display: flex;
			align-items: center;
			border: 1rpx solid #999;
			border-radius: 4rpx;
			.date{
				margin-right: 10rpx;
				font-size:26rpx;
			}
		}
	}
</style>