一、需求要求这样
二、代码实现
javascript
<view class="calender" @click="showriliall">
<text class="lineText">探视日期:</text>
<text class="middleText">{{timerili}}</text>
<image src="@/static/booking/rili.png" class="calenderImg" mode=""></image>
</view>
<u-calendar monthNum ="12"
:show="showrili" @confirm="confirmrili"></u-calendar>
confirmrili(e) {
this.timerili=e[0]
console.log(e[0]);
this.showrili=false
},
.calender {
padding: 16rpx 20rpx;
box-sizing: border-box;
width: 620rpx;
height: 76rpx;
display: flex;
align-items: center;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 2rpx solid #108EFF;
margin-top: 28rpx;
.calenderImg {
width: 44rpx;
height: 44rpx;
margin-left: 260rpx;
}
.lineText {
font-size: 20rpx;
color: #999999;
}
.middleText {
font-size: 30rpx;
color: #333333;
}
}
三、重点
使用的uview里面的Calendar 日历 ,两个重点一个是点击之后的选中的时间就是e[0],
还有个是monthNum ="12",表示显示几个月最大,不能选太大不然卡
confirm(e) { console.log(e); }