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


Posted in Javascript onMay 09, 2019

应公司需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进!

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

以上所述是小编给大家介绍的微信小程序日历弹窗选择器详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery登陆判断简单实现代码
Apr 21 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
Javascript节点关系实例分析
May 15 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
JS常用知识点整理
Jan 21 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 #Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 #Javascript
uni-app之APP和小程序微信授权方法
May 09 #Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 #Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 #Javascript
JS原型与继承操作示例
May 09 #Javascript
详解微信小程序回到顶部的两种方式
May 09 #Javascript
You might like
php与paypal整合方法
2010/11/28 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
PHP7 弃用功能
2021/03/09 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Three.js基础部分学习
2017/01/08 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
python处理二进制数据的方法
2015/06/03 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python求最大连续子数组的和
2018/07/07 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python字符串格式化输出代码实例
2019/11/22 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
职业生涯规划书前言
2014/04/15 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
离婚上诉状范文
2015/05/23 职场文书
初中数学教学反思范文
2016/02/17 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书