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


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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
js替代copy(示例代码)
Nov 27 Javascript
javascript计时器详解
Feb 28 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
Vue数据绑定简析小结
May 07 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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 CURL获取邮箱地址的详解
2013/06/03 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
对比分析json及XML
2014/11/28 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
JS实现电商放大镜效果
2017/08/24 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
webpack优化的深入理解
2018/12/10 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python实现京东抢秒杀功能
2021/01/25 Python
教育专业个人求职信
2013/12/02 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
优秀广告词大全
2014/03/19 职场文书
医学专业大学生求职信
2014/07/12 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
感谢信
2019/04/11 职场文书