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

之前小程序开发需要用到日历控件，但是关于小程序可用的实在资源有限，于是就自己写了

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

效果图：

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。