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


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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
JS实现浏览器菜单命令
Sep 05 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
javascript Number 与 Math对象的介绍
Nov 17 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脚本的10个技巧(1)
2006/10/09 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP中的类型约束介绍
2015/05/11 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
javascript兼容性(实例讲解)
2017/08/15 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python小程序实现刷票功能详解
2019/07/17 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python开发入门——set的使用
2020/09/03 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
总裁办公室主任职责
2014/01/02 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
不假外出检讨书
2014/01/27 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2015新年寄语大全
2014/12/08 职场文书
2015年技术员工作总结
2015/04/10 职场文书
小学语文教学随笔
2015/08/14 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
php实例化对象的实例方法
2021/11/17 PHP
nginx 配置缓存
2022/05/11 Servers