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

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

效果图：

射流研究…代码：

日期数据：函数(){让dataAll=[]//总日历数据让dataAll2=[]//总日历数据让dataMonth=[]//月日历数据让日期=新日期/当前日期让year=date.getFullYear()//当前年让周=日期。getday()；//当天星期几让周=[]让月=日期。getmonth()1/当前月份让day=date.getDate()//当天让daysCount=100//一共显示多少天让现在天数=0//计数器让monthList=[1，2，3，4，5，6，7，8，9，10，11，12]//月份列表让nowMonthList=[]//本年剩余年份用于(让i=月；i13i ){ nowMonthList.push(i) }让year list=[年份]//年份最大可能用于(设I=0；I日数/365 2；i ){ yearList.push(第我年第一期)}让leapYear=函数(年份){//判断是否闰年if(((年份% 4)=0)((年份% 100)!=0) ||((年份% 400)=0)){ return(true)；} else { return(false)；} }用于(让I=0；i yearList.lengthi ){//遍历年让mList if (yearList[i]==year){//判断当前年份{ mList=now monthList } else { mList=monthList }为(让j=0；j mList.lengthj ){//循环月份dataMonth=[]让t_days=[31，28 leapYear(yearList[i])，31，30，31，30，31，31，30，31，30，30，31，30，31]让t _ days _本年=[]if(年列表[I]==年){ for(让m=0；mnowMonthList.lengthm){ t _ days _今年。push(t _ days[mList[m]-1])} t _ days=t _ days _本年} else { t _ days=[31，28 leapYear(yearList[i])，31，30，31，30，31，31，30，31，30，30，30，31，30，30，30，31] } for(让k=0；k t _ days[j]；k ){//循环每天几天了让现在数据if(现在天数计数){//如果计数器没满让days=k ^ 1 if(days 10){ days=' 0 ' days } if(年列表[I]==年列表[j]==月){//判断当年当月如果(k ^ 1=天){ nowData={ year: yearList[i]，month: mList[j]，day :k ^ 1，date: yearList[i] '' mList[j]天，选择ed : 0 0，re:年列表[I]'-' mList[j]'-'天，} datamonth。推送(现在数据)if(k ^ 1==天){ 0让日期=新日期(年份列表[I]'-'列表[j]'-'(k ^ 1))让weekss=date.getDay()//获取每个月第一天是周几几周。push(weeks)} } } else {//其他情况nowData={//组装自己需要的数据year: yearList[i]，month: mList[j]，day: k 1，Date : year list[I]' ' mList[j]天，选中： 0 0，re: year list[I]'-' mList[j]'-'天，} datamonth。如果(k==0){让日期=新日期(年份列表[I]'-' mList[j]'-k 1)让星期=日期，则推送(现在数据)获取每个月第一天是周几几周。push(week ss)} } } else { break } } data all。推送(DataMount)} }用于(让I=0；我收集所有数据。长度；i ){ if (dataAll[i]).长度！=0){ dataAll 2。推送(dataAll[I])；} }这个。setdata({ date : dataall 2，weeks 3360 weeks })}，以上代码主要功能是作为数据源渲染

页面结构代码：

view class=' head x2 ' view class=' head date '日/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 class='流浆箱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='嘴部头' { date[index]' .年份}}年{ { date[index]} .月份}}月/view class=' day box ' view class=' day ' wx : if=' { { weeks[index]0 } } '/view class=' day ' wx : if=' { { weeks[index]1 } } '/view class=' day ' wx : if=' { { weeks[index]2 } } /view view class=' day ' wx : if=' { { weeks[index]3 } } '/view class=' day ' wx 333333 BC ' : ' ' } ' wx : for=' { { date } } ' wx : for-index=' idx ' data-index=' { { index } } ' data-indexs=' { { idx } } ' bind tap=' selectday ' view class=' actname { } selected==1？bc2 ' : ' ' } } ' { { date[idx]。行动吧。主题} }/视图{ {日期[idx]} .day } } view class=' actname 2 { { item。selected==1？bc2 ' : ' ' } } ' wx : if=' { { date[idx]。行动吧。费率} } ' { { date[idx]。行动吧。费率/10 } }折/view/view/view/view class=' none 88 ' wx : if=' { { page type==' day ' } '/view view class=' fixedbtn ' bind tap=' submit BTN ' wx : if=' { { page type=' day ' } '确认选择/view将数据渲染至页面结构

页面样式表样式代码：headdate { height: 30px背景-颜色：白色；flex:1文本对齐：中心；线高： 30px}.流浆箱{ display : flex display :-web套件-flex；边框-底部： 1px实心# e5e5e5}。头箱2 { display : flex位置：固定；宽度： 750 rpxdisplay :-web套件-flex；边框-底部： 1px实心# e5e5e5背景-颜色：白色；z-index : 2；}.口头{ height: 88rpx背景-颜色： # F4 F4；宽度： 750 rpx线高： 88rpx文本对齐：中心；}.口{ /*背景色-:白色；*//*填充-top : 10 rpx；填充-底部： 10 rpx*/}.daybox{背景-颜色：白色；衬垫-顶部： 10 rpx填充-底部： 10 rpx}.day { width: 107rpx高度： 107 rpx线高： 107 rpx文本对齐：中心；显示器：内联块；相对位置：top : 0；边距-top :-10 rpx；飞越：隐藏；color : # 353535 font-size : 34 rpx；} .第二天{ color : # 04 babe宽度： 107 rpx高度： 107 rpx线高： 107 rpx文本对齐：中心；显示器：内联块；相对位置：底部： 0；边距-top : 0；}.actname { color: # 04babe绝对位置：font-size : 20 rpxtop :-30 rpx；宽度： 107 rpx文本对齐：中心；} .actname 2 { color : # 04 babe绝对位置：font-size : 20 rpx底部：-30 rpx；宽度： 107 rpx文本对齐：中心；}.BC {底色： # 04宝贝；颜色：白色！重要；}.bc2{ color: white！重要；} .none 88 { height : 88 rpx宽度： 750 rpx}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。