欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序日历弹窗选择器代码实例

程序员文章站 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、具体思路就是:根据传递的参数计算出当月的第一天为星期几,然后从星期几开始排列,通过循环{{总天数}}次,让日期循环出来。然后再获取当前日期,判断日历弹窗与当前月份是否吻合,如果吻合,就要将在当前日期之前的日期都设置为不可点击状态。然后就是点击获取值,整个日历流程完毕。

以上所述是小编给大家介绍的微信小程序日历弹窗选择器详解整合,希望对大家有所帮助