小程序日歷控件使用方法詳解
之前小程序開(kāi)發(fā)需要用到日歷控件,但是關(guān)于小程序可用的實(shí)在資源有限,于是就自己寫(xiě)了一個(gè),如今項(xiàng)目上線后將它分享出來(lái),希望能幫到需要的人。
效果圖:

JS代碼:
dateData: function () {
let dataAll = []//總?cè)諝v數(shù)據(jù)
let dataAll2 = []//總?cè)諝v數(shù)據(jù)
let dataMonth = []//月日歷數(shù)據(jù)
let date = new Date//當(dāng)前日期
let year = date.getFullYear()//當(dāng)前年
let week = date.getDay();//當(dāng)天星期幾
let weeks=[]
let month = date.getMonth() + 1//當(dāng)前月份
let day = date.getDate()//當(dāng)天
let daysCount = 100//一共顯示多少天
let dayscNow = 0//計(jì)數(shù)器
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){//判斷當(dāng)前年份
mList = nowMonthList
}else{
mList = monthList
}
for (let j = 0; j < mList.length;j++){//循環(huán)月份
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++){//循環(huán)每天
dayscNow++
let nowData
if (dayscNow < daysCount) {//如果計(jì)數(shù)器沒(méi)滿
let days = k + 1
if (days < 10) {
days = "0" + days
}
if (yearList[i] == year && mList[j] == month){//判斷當(dāng)年當(dāng)月
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()//獲取每個(gè)月第一天是周幾
weeks.push(weekss)
}
}
} else {//其他情況
nowData = {//組裝自己需要的數(shù)據(jù)
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()//獲取每個(gè)月第一天是周幾
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
})
},
以上代碼主要功能是作為數(shù)據(jù)源渲染
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'}}">確認(rèn)選擇</view>
將數(shù)據(jù)渲染至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;
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
uni-app實(shí)現(xiàn)點(diǎn)贊評(píng)論功能
這篇文章主要介紹了uni-app實(shí)現(xiàn)點(diǎn)贊評(píng)論功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
小程序自定義導(dǎo)航欄兼容適配所有機(jī)型(附完整案例)
這篇文章主要介紹了小程序自定義導(dǎo)航欄兼容適配所有機(jī)型(附完整案例),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
JavaScript面向?qū)ο笾R(shí)串結(jié)(讀JavaScript高級(jí)程序設(shè)計(jì)(第三版))
最近在看JavaScript高級(jí)程序設(shè)計(jì)(第三版),面向?qū)ο笠徽?0多頁(yè),來(lái)來(lái)回回看了三五遍,每次看的收獲都不一樣2012-07-07
微信小程序?qū)崿F(xiàn)運(yùn)動(dòng)步數(shù)排行功能(可刪除)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)運(yùn)動(dòng)步數(shù)排行功能(可刪除),實(shí)現(xiàn)代碼也很簡(jiǎn)單,需要的朋友可以參考下2018-07-07
基于JavaScript實(shí)現(xiàn)輪播圖代碼
在前端程序開(kāi)發(fā)中,經(jīng)常會(huì)實(shí)現(xiàn)js輪播圖的效果,怎么實(shí)現(xiàn)的呢?下面小編給大家分享基于基于JavaScript實(shí)現(xiàn)輪播圖代碼 ,非常不錯(cuò),感興趣的朋友可以參考下2016-07-07
JavaScript?中的?parseInt()?函數(shù)詳解
parseInt函數(shù)將其第一個(gè)參數(shù)轉(zhuǎn)換為一個(gè)字符串,對(duì)該字符串進(jìn)行解析,然后返回一個(gè)整數(shù)或?NaN,這篇文章主要介紹了JavaScript?的?parseInt()?函數(shù),需要的朋友可以參考下2023-05-05
javascript性能優(yōu)化之DOM交互操作實(shí)例分析
這篇文章主要介紹了javascript性能優(yōu)化之DOM交互操作技巧,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)DOM操作過(guò)程中的各種常見(jiàn)優(yōu)化操作技巧,需要的朋友可以參考下2015-12-12

