小程序日历控件使用方法详解
之前小程序开发需要用到日历控件，但是关于小程序可用的实在资源有限，于是就自己写了一个，如今项目上线后将它分享出来，希望能帮到需要的人。
成都创新互联公司专注于天水网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供天水营销型网站建设，天水网站制作、天水网页设计、天水网站官网定制、微信小程序开发服务，打造天水网络公司原创品牌,更为您提供天水网站排名全网营销落地服务。
效果图：
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
})
},
以上代码主要功能是作为数据源渲染
wxml代码：
日 一 二 三 四 五 六 日 一 二 三 四 五 六 {{date[index].year}}年{{date[index].month}}月 {{date[idx].act.subject}} {{date[idx].day}}{{date[idx].act.rate/10}}折 确认选择
将数据渲染至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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
本文标题：小程序日历控件使用方法详解
本文链接：http://mswzjz.cn/article/gsjeed.html