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


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 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
js实现简单的打印表格
Jan 15 Javascript
JavaScript编码小技巧分享
Sep 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
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
python实现报表自动化详解
2017/11/16 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python读写配置文件操作示例
2019/07/03 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
"序列点" 是什么
2016/07/29 面试题
介绍一下JNDI的基本概念
2013/07/26 面试题
园林设计师自荐信
2013/11/18 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏