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


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实现的Select级联
Jan 27 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
原生js实现轮播图特效
May 04 Javascript
vue $mount 和 el的区别说明
Sep 11 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_pdo 预处理语句详解
2016/11/21 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
python3调用R的示例代码
2018/02/23 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python的turtle库使用详解
2019/05/10 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python编写俄罗斯方块
2020/03/13 Python
python使用建议技巧分享(三)
2020/08/18 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
Android interview questions
2016/12/25 面试题
一些网络技术方面的面试题
2014/05/01 面试题
军神教学反思
2014/02/04 职场文书
产品开发计划书
2014/04/27 职场文书
素质教育标语
2014/06/27 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
开学典礼致辞
2015/07/29 职场文书
大学同学聚会感言
2015/07/30 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS