小程序日历控件使用方法详解
罗忠浩 人气:0之前小程序开发需要用到日历控件，但是关于小程序可用的实在资源有限，于是就自己写了一个，如今项目上线后将它分享出来，希望能帮到需要的人。
效果图：
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;
}
加载全部内容