您好,登錄后才能下訂單哦!
之前小程序開發需要用到日歷控件,但是關于小程序可用的實在資源有限,于是就自己寫了一個,如今項目上線后將它分享出來,希望能幫到需要的人。
效果圖:
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; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。