微信小程序日历弹窗选择器代码实例
程序员文章站
2023-11-18 12:55:58
应公司需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进!
先上一个效果图:(当天日期为2018-4-18...
应公司需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进!
先上一个效果图:(当天日期为2018-4-18)
时间改为5月份的效果图:
直接上代码:
wxml:
<view class="weui-cells weui-cells_after-title" style='margin-top:100rpx;'> <view class="weui-cell weui-cell_access" hover-class="weui-cell_active" catchtap='showmodalbtn'> <view class="weui-cell__bd">选择时间</view> <view class="weui-cell__ft weui-cell__ft_in-access">{{choosedate}}</view> </view> </view> <view class="modal-mask" bindtap="hidemodal" catchtouchmove="preventtouchmove" hidden="{{showmodal}}"></view> <view class="modal-dialog" hidden="{{showmodal}}"> <view class='modalbox'> <view class='box'> <view class='calendarbox'> <view class='calendartitle'> 当前月份: <text style='font-size:46rpx;'>{{thismonth}}</text> 月 </view> <block wx:for="{{week}}" wx:key="item"> <view class="week">{{week[index]}}</view> </block> <block wx:for="{{weeknum}}" wx:key="item"> <view class="week" style="border-bottom:0;color:transparent">0</view> </block> <block wx:for="{{daylist}}" wx:key="item"> <view class='week' style="border-bottom:0;background-color:{{dayindex>index?'#f1f1f1':(tapthis==index?'#1296db':'')}};color:{{tapthis==index?'white':''}}" catchtap="choosedate" data-index="{{index}}" data-value="{{item}}">{{item}}</view> </block> </view> </view> </view> </view>
wxss:
.modalbox{ width: 100%; font-size: 32rpx; } .box{ margin: 0 auto; width: 630rpx; } .calendartitle{ /* margin: 0 auto; width: 630rpx; */ width: 100%; height: 80rpx; line-height: 80rpx; text-align: center; border-bottom: 1rpx solid #ddd; } .calendarbox{ /* width: 630rpx; */ width:100%; margin: 0 auto; border:1rpx solid #ddd; } .week{ display: inline-block; width:90rpx; height: 80rpx; text-align: center; line-height: 80rpx; border-bottom: 1rpx solid #ddd; } .datebtn{ width:100%; height: 80rpx; display: flex; justify-content: space-between; margin-top: 20rpx; } .datebtn>button{ width: 45%; height: 100%; display:flex; justify-content: center; align-items: center; margin: 0; font-size: 36rpx; } /* 模态框 */ .modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; } .modal-dialog { width: 85%; padding: 100rpx 30rpx 30rpx 30rpx; overflow: hidden; position: fixed; top: 20%; left: 0; right: 0; margin: 0 auto; z-index: 9999; background: rgba(255, 255, 255, 1); border-radius: 5rpx; }
js:
page({ /** * 页面的初始数据 */ data: { showmodal:true, weeklength:7, week:["日","一","二","三","四","五","六"], daylist:[], weeknum:0, tapthis:0, thismonth:0, thisyear:0, dayindex:0, choosedate:"", }, getweek(year,month,day){ var that = this; var d = new date(); d.setfullyear(year); d.setmonth(month-1); d.setdate(1); var n = d.getday(); var arr =[]; var index=0; var dayn=1; for(var i = 0; i<day; i++){ arr.push(dayn++); } var now = new date(); var nowyear = now.getfullyear(); var nowmonth = now.getmonth()+1; var nowday = now.getdate(); var val = 1; if(year==nowyear){ if(month==nowmonth){ index=arr.indexof(nowday); console.log(index); val = nowday; } } that.setdata({ weeknum:n, daylist:arr, dayindex:index, tapthis:index, thismonth:month, thisyear:year, choosedate:year+"-"+month+"-"+val, }) }, choosedate(e){ var that = this; var n = e.currenttarget.dataset.index; var val = e.currenttarget.dataset.value; console.log(n); if(n>=that.data.dayindex){ that.setdata({ tapthis:n, choosedate:that.data.thisyear+"-"+that.data.thismonth+"-"+val, showmodal:true, }) } }, /** * 弹出框蒙层截断touchmove事件 */ preventtouchmove: function () { }, /** * 隐藏模态对话框 */ hidemodal() { var that = this; that.setdata({ showmodal: true, }) }, showmodalbtn(){ var that = this; that.setdata({ showmodal:false }) }, /** * 生命周期函数--监听页面加载 */ onload: function (e) { var that = this; that.getweek("2018","04","31"); //使用方法: 在此函数内传入年、月、日(此月的天数)即可。 } })
代码设计思路:
1、此代码是符合我们公司实际情况定制的,选择哪个月份,需要传递哪个月份的参数,比如我要2018-04的日历选择器,那么我需要在 getweek() 中传递年,月,日(此月的总天数)作为参数,代码会自动计算出当月的一号是星期几并且排版好!
如果不知道此月的天数 ,这里还提供如下代码方便各位码友计算出各个月份的天数
getdaynum(year,month){ //传入参数年份 和 要计算的月份, 可以为字符串,也可以为数字。 var that = this; var d = new date(); d.setfullyear(year); d.setmonth(month); d.setdate(0); console.log(d.getdate()); //d.getdate() 即为此月的总天数! },
2、具体思路就是:根据传递的参数计算出当月的第一天为星期几,然后从星期几开始排列,通过循环{{总天数}}次,让日期循环出来。然后再获取当前日期,判断日历弹窗与当前月份是否吻合,如果吻合,就要将在当前日期之前的日期都设置为不可点击状态。然后就是点击获取值,整个日历流程完毕。
以上所述是小编给大家介绍的微信小程序日历弹窗选择器详解整合,希望对大家有所帮助
上一篇: GridControl简单属性操作
下一篇: AjaxPro对象参数传递