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


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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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下正则来匹配dede模板标签的代码
2010/08/21 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python服务器端收发请求的实现代码
2014/09/29 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python守护进程用法实例分析
2015/06/04 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python生成随机验证码的两种方法
2015/12/22 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
护士辞职信范文
2014/01/19 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
创先争优承诺书范文
2014/03/31 职场文书
青年文明号创建承诺
2014/03/31 职场文书
个人股份合作协议书
2014/10/24 职场文书
离婚协议书的范本
2015/01/27 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
python获取字符串中的email
2022/03/31 Python