组件不合理的提示。我就是不想让他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>