uniapp_微信小程序日历

一、需求要求这样

二、代码实现

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);
			}
相关推荐
编程千纸鹤1 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域2 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
断墨先生4 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai5 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~10 小时前
一些 uniapp相关bug
uni-app·bug
丁总学Java13 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
瑶琴AI前端14 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
说私域14 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86814 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650215 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车