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


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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 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
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php分页函数完整实例代码
2014/09/22 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python中的rfind()方法使用详解
2015/05/19 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
在pycharm中实现删除bookmark
2020/02/14 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
Servlet的生命周期
2013/08/25 面试题
制药工程专业毕业生推荐信
2013/12/24 职场文书
八年级物理教学反思
2014/01/19 职场文书
演讲稿的写法
2014/05/19 职场文书
婚育证明样本
2015/06/16 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
Nginx HTTP跳转至HTTPS
2022/05/15 Servers