小程序日历控件使用方法详解
这篇文章主要为大家详细介绍了小程序日历控件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
之前小程序开发需要用到日历控件，但是关于小程序可用的实在资源有限，于是就自己写了一个，如今项目上线后将它分享出来，希望能帮到需要的人。
效果图：
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 = 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 以上代码主要功能是作为数据源渲染
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; }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
标签：