微信小程序日歷彈窗選擇器的示例分析

小編給大家分享一下微信小程序日歷彈窗選擇器的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)-云計(jì)算及IDC服務(wù)提供商，涵蓋公有云、IDC機(jī)房租用、溫江服務(wù)器租用、等保安全、私有云建設(shè)等企業(yè)級(jí)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)，聯(lián)系電話：13518219792

先上一個(gè)效果圖：

時(shí)間改為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">選擇時(shí)間</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'>
     當(dāng)前月份:
     <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" >0</view>
    </block>
    <block wx:for="{{dayList}}" wx:key="item">
     <view class='week'  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;
} 
/* 模態(tài)框 */ 
 
.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({
 
 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 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,
    })
   }
 },
 /** 
 * 彈出框蒙層截?cái)鄑ouchmove事件 
 */
 preventTouchMove: function () {
 },
 /** 
  * 隱藏模態(tài)對(duì)話框 
  */
 hideModal() {
  var that = this;
  that.setData({
   showModal: true,
  })
 }, 
 showModalBtn(){
  var that = this;
  that.setData({
   showModal:false
  })
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  */
 onLoad: function (e) {
  var that = this;
  that.getWeek("2018","04","31"); //使用方法： 在此函數(shù)內(nèi)傳入年、月、日(此月的天數(shù))即可。
 }
})

代碼設(shè)計(jì)思路：

1、此代碼是符合我們公司實(shí)際情況定制的，選擇哪個(gè)月份，需要傳遞哪個(gè)月份的參數(shù)，比如我要2018-04的日歷選擇器，那么我需要在 getWeek() 中傳遞年，月，日（此月的總天數(shù)）作為參數(shù)，代碼會(huì)自動(dòng)計(jì)算出當(dāng)月的一號(hào)是星期幾并且排版好！

如果不知道此月的天數(shù) ，這里還提供如下代碼方便各位碼友計(jì)算出各個(gè)月份的天數(shù)

getDayNum(year,month){ //傳入?yún)?shù)年份 和 要計(jì)算的月份， 可以為字符串，也可以為數(shù)字。
  var that = this;
  var d = new Date();
  d.setFullYear(year);
  d.setMonth(month);
  d.setDate(0);
  console.log(d.getDate()); //d.getDate() 即為此月的總天數(shù)！
 },

2、具體思路就是：根據(jù)傳遞的參數(shù)計(jì)算出當(dāng)月的第一天為星期幾，然后從星期幾開(kāi)始排列，通過(guò)循環(huán){{總天數(shù)}}次，讓日期循環(huán)出來(lái)。然后再獲取當(dāng)前日期，判斷日歷彈窗與當(dāng)前月份是否吻合，如果吻合，就要將在當(dāng)前日期之前的日期都設(shè)置為不可點(diǎn)擊狀態(tài)。然后就是點(diǎn)擊獲取值，整個(gè)日歷流程完畢。

以上是“微信小程序日歷彈窗選擇器的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：微信小程序日歷彈窗選擇器的示例分析
鏈接URL：http://muchs.cn/article48/geeohp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、域名注冊(cè)、定制開(kāi)發(fā)、建站公司、網(wǎng)站內(nèi)鏈、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)