一、需求要求这样

 

二、代码实现 

<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);}