小程序日历控件使用方法详解-创新互联

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

专注于为中小企业提供成都做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业绥滨免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

效果图：

 

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= 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
  })
 },

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：小程序日历控件使用方法详解-创新互联
本文地址：http://bjjierui.cn/article/dihied.html