小程序日历控件使用方法详解


Posted in Javascript onDecember 29, 2018

之前小程序开发需要用到日历控件,但是关于小程序可用的实在资源有限,于是就自己写了一个,如今项目上线后将它分享出来,希望能帮到需要的人。

效果图:

 小程序日历控件使用方法详解

JS代码:

dateData: function () {
  let dataAll = []//总日历数据
  let dataAll2 = []//总日历数据
  let dataMonth = []//月日历数据
  let date = new Date//当前日期
  let year = date.getFullYear()//当前年
  let week = date.getDay();//当天星期几
  let weeks=[]
  let month = date.getMonth() + 1//当前月份
  let day = date.getDate()//当天
  let daysCount = 100//一共显示多少天
  let dayscNow = 0//计数器
  let monthList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]//月份列表
  let nowMonthList=[]//本年剩余年份
  for (let i = month;i<13;i++){
   nowMonthList.push(i)
  }
  let yearList = [year]//年份最大可能
  for (let i = 0; i < daysCount/365+2;i++){
   yearList.push(year+i+1)
  }  
  let leapYear = function (Year) {//判断是否闰年 
   if (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0)) {
    return (true);
   } else { return (false); }
  }
  for (let i = 0; i < yearList.length;i++){//遍历年
   let mList
   if (yearList[i] == year){//判断当前年份
    mList = nowMonthList
   }else{
    mList = monthList
   }
   for (let j = 0; j < mList.length;j++){//循环月份
    dataMonth=[]
    let t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    let t_days_thisYear=[]
    if (yearList[i] == year){
     for (let m = 0; m<nowMonthList.length;m++){
      t_days_thisYear.push(t_days[mList[m]-1])
     }
     t_days = t_days_thisYear
    } else {
     t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    }
    for (let k = 0; k < t_days[j];k++){//循环每天
     dayscNow++
     let nowData
     if (dayscNow < daysCount) {//如果计数器没满
      let days = k + 1
      if (days < 10) {
       days = "0" + days
      }
      if (yearList[i] == year && mList[j] == month){//判断当年当月
       if (k + 1 >= day) {
        nowData = {
         year: yearList[i],
         month: mList[j],
         day: k + 1,
         date: yearList[i] + "" + mList[j] + days,
         selected: 0,
         re: yearList[i] + "-" + mList[j] + "-" + days,
        }
        dataMonth.push(nowData)
        if (k+1 == day) {
         let date = new Date(yearList[i] + "-" + mList[j] + "-" + (k + 1))
         let weekss = date.getDay()//获取每个月第一天是周几
         weeks.push(weekss)
        }
       }
      }      else {//其他情况
       nowData = {//组装自己需要的数据
        year: yearList[i],
        month: mList[j],
        day: k + 1,
        date: yearList[i] + "" + mList[j] + days,
        selected: 0,
        re: yearList[i] + "-" + mList[j] + "-" + days,
       }
       dataMonth.push(nowData)
       if (k == 0) {
        let date = new Date(yearList[i] + "-" + mList[j] + "-" + k + 1)
        let weekss = date.getDay()//获取每个月第一天是周几
        weeks.push(weekss)
       }
      }
     }else{
      break
     }
    }
    dataAll.push(dataMonth)
   }
  }
  for (let i = 0; i < dataAll.length;i++){
   if (dataAll[i].length!=0){
    dataAll2.push(dataAll[i]);
   }
  }
  this.setData({
   date: dataAll2,
   weeks: weeks
  })
 },

以上代码主要功能是作为数据源渲染

wxml代码:

<view class="headbox2">
 <view class="headdate">日</view>
 <view class="headdate">一</view>
 <view class="headdate">二</view>
 <view class="headdate">三</view>
 <view class="headdate">四</view>
 <view class="headdate">五</view>
 <view class="headdate">六</view>
</view>
<view class="headbox">
 <view class="headdate">日</view>
 <view class="headdate">一</view>
 <view class="headdate">二</view>
 <view class="headdate">三</view>
 <view class="headdate">四</view>
 <view class="headdate">五</view>
 <view class="headdate">六</view>
</view>
<view class="mouth" wx:for="{{date}}" wx:for-item="date" wx:for-index="index">
 <view class="mouthhead">{{date[index].year}}年{{date[index].month}}月</view>
 <view class="daybox">
 <view class="day" wx:if="{{weeks[index]>0}}"></view>
 <view class="day" wx:if="{{weeks[index]>1}}"></view>
 <view class="day" wx:if="{{weeks[index]>2}}"></view>
 <view class="day" wx:if="{{weeks[index]>3}}"></view>
 <view class="day" wx:if="{{weeks[index]>4}}"></view>
 <view class="day" wx:if="{{weeks[index]>5}}"></view>
 <view class="day {{item.selected == 1 ? 'bc':''}}" wx:for="{{date}}" wx:for-index="idx" data-index="{{index}}" data-indexs="{{idx}}" bindtap="selectday">
  <view class="actname {{item.selected == 1 ? 'bc2':''}}">{{date[idx].act.subject}}</view>
  {{date[idx].day}}
  <view class="actname2 {{item.selected == 1 ? 'bc2':''}}" wx:if="{{date[idx].act.rate}}">{{date[idx].act.rate/10}}折</view>
 </view>
 </view>
</view>
<view class="none88" wx:if="{{pagetype=='day'}}"></view>
<view class="fixedbtn" bindtap="submitbtn" wx:if="{{pagetype=='day'}}">确认选择</view>

将数据渲染至wxml

wxss样式代码:

.headdate{
 height: 30px;
 background-color: white;
 flex:1;
 text-align: center;
 line-height: 30px;
}
.headbox{
 display: flex;
 display: -webkit-flex;
 border-bottom: 1px solid #e5e5e5;
}
.headbox2{
 display: flex;
 position: fixed;
 width: 750rpx;
 display: -webkit-flex;
 border-bottom: 1px solid #e5e5e5;
 background-color: white;
 z-index: 2;
}
.mouthhead{
 height: 88rpx;
 background-color: #f4f4f4;
 width: 750rpx;
 line-height: 88rpx;
 text-align: center;
}
.mouth{
  /* background-color: white; */
 /* padding-top: 10rpx;
 padding-bottom: 10rpx; */
}
.daybox{

  background-color: white; 
  padding-top: 10rpx;
  padding-bottom: 10rpx;  

}
.day{
 width: 107rpx;
 height: 107rpx;
 line-height: 107rpx;
 text-align: center;
 display: inline-block;
 position: relative;
 top: 0;
 margin-top: -10rpx;
 overflow: hidden;
 color: #353535;
 font-size: 34rpx;
}
.day2{
 color: #04babe;
 width: 107rpx;
 height: 107rpx;
 line-height: 107rpx;
 text-align: center;
 display: inline-block;
 position: relative;
 bottom: 0;
 margin-top: 0;
}
.actname{
 color: #04babe;
 position: absolute;
 font-size: 20rpx;
 top: -30rpx;
 width: 107rpx;
 text-align: center;
}
.actname2{
 color: #04babe;
 position: absolute;
 font-size: 20rpx;
 bottom: -30rpx;
 width: 107rpx;
 text-align: center;
}
.bc{
 background-color: #04babe;
 color: white!important;
}
.bc2{
 color: white!important;
}
.none88{
 height: 88rpx;
 width: 750rpx;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
vue.js循环radio的实例
Nov 07 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
小程序自定义日历效果
Dec 29 #Javascript
微信小程序自定义带价格显示日历效果
Dec 29 #Javascript
微信小程序日历效果
Dec 29 #Javascript
微信小程序日历组件使用方法详解
Dec 29 #Javascript
微信小程序自定义可滑动日历界面
Dec 28 #Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 #Javascript
You might like
全国中波电台频率表
2020/03/11 无线电
php实现singleton()单例模式实例
2014/11/06 PHP
php读取本地json文件的实例
2018/03/07 PHP
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python采集微信公众号文章
2018/12/20 Python
python实现动态创建类的方法分析
2019/06/25 Python
python opencv如何实现图片绘制
2020/01/19 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python类的继承super相关原理解析
2020/10/22 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
低碳环保标语
2014/06/12 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL