应公司需求，写了一个弹窗日历选择器，感觉用着还不错，封装了一下，分享给大家，希望大家有什么意见可以指出来相互交流共同改进！
先上一个效果图：（当天日期为2018-4-18）
时间改为5月份的效果图：
直接上代码：
wxml:
<view> <view hover-class="weui-cell_active" catchtap='showModalBtn'> <view>选择时间</view> <view>{{chooseDate}}</view> </view> </view> <view bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{showModal}}"></view> <view hidden="{{showModal}}"> <view> <view> <view> <view> 当前月份: <text>{{thisMonth}}</text> 月 </view> <block wx:for="{{week}}" wx:key="item"> <view>{{week[index]}}</view> </block> <block wx:for="{{weekNum}}" wx:key="item"> <view>0</view> </block> <block wx:for="{{dayList}}" wx:key="item"> <view 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() 即为此月的总天数！ },