我遇到了小程序要用日历的需求,本来想省事,在网上找插件用,看了好多,感觉好麻烦,就自己写了有个,功能比较简单,实现基本需求!
这是data数据
data: {
//当前时间
currentime:[],
//月份日历
currentarr: [],
},
页面
<view class='goouc_calendar_wrap'>
<view class='goouc_calendar_tit'>
<view class='lt' bindtap='promonth'>«</view>
{{currentime[0]}}-{{currentime[1]}}
<view class='rt' bindtap='nextmonth'>»</view>
</view>
<view class='goouc_calendar_xq'>
<view>日</view>
<view>一</view>
<view>二</view>
<view>三</view>
<view>四</view>
<view>五</view>
<view>六</view>
</view>
<view class='goouc_date'>
<view class='goouc_view' wx:for="{{currentarr}}" wx:key="{{index}}">
<image class='{{index == 4 ? "active":""}}' src='../../images/rl-bg.png'></image>
{{item}}
</view>
</view>
</view>
css
.goouc_calendar_wrap {
width: 92%;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 22px 0px rgba(53, 146, 255, 0.33);
border-radius: 10px;
margin-top: -46px;
margin-left: 4%;
padding-bottom: 10px;
box-sizing: border-box;
z-index: 9;
}
.goouc_calendar_tit {
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 17px;
font-weight: 500;
color: rgba(17, 17, 17, 1);
border-bottom: 1px solid #ccc;
position: relative;
}
.goouc_calendar_tit .lt {
position: absolute;
width: 30px;
left: 30%;
top: 0;
}
.goouc_calendar_tit .rt {
position: absolute;
width: 30px;
right: 30%;
top: 0;
}
.goouc_calendar_xq {
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 15px;
font-weight: 500;
color: rgba(17, 17, 17, 1);
display: flex;
justify-content: space-around;
}
.goouc_calendar_xq>view {
width: 14.28%;
height: 44px;
line-height: 44px;
}
.goouc_date {
width: 100%;
text-align: center;
font-size: 17px;
/* font-weight:500; */
color: rgba(17, 17, 17, 1);
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.goouc_date .goouc_view {
width: 14.28%;
height: 44px;
line-height: 44px;
position: relative;
}
.goouc_date .goouc_view image {
display: none;
position: absolute;
width: 24px;
height: 24px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.goouc_date .goouc_view image.active {
display: block;
}
.goouc_date::after {
content: '';
flex: auto;
}
js
//获取当前时间函数
currentime: function() {
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return [y, m, d];
},
// 获取时间是星期几
nyr: function(y, m, d) {
// 求解cy年cm月cd日是星期几,parseInt代表取整 d=1是去每个月第一天
var cc = parseInt(y / 100); //c
var cy = y - cc * 100; //y
var cm = m; //m
var cd = d; //d
// 某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算
if (m == 1 || m == 2) {
cc = parseInt((y - 1) / 100);
cy = y - 1 - cc * 100;
cm = 12 + m;
}
//w=y+[y/4]+[c/4]-2c+[26(m+1）/10]+d-1
// var csum = y + [y / 4] + [c / 4] - 2c+[26(m + 1）/10]+d-1;
var csum = cy + parseInt(cy / 4) + parseInt(cc / 4) - 2 * cc + parseInt(26 * (cm + 1) / 10) + cd - 1;
// 注意使用蔡勒公式时出现负数情况
if (csum < 0) {
var fd = parseInt((csum % 7 + 7) % 7);
} else {
var fd = parseInt(csum % 7);
}
var arr = [];
switch (fd) {
case 0:
arr = [];
break;
case 1:
arr = [''];
break;
case 2:
arr = ['', ''];
break;
case 3:
arr = ['', '', ''];
break;
case 4:
arr = ['', '', '', ''];
break;
case 5:
arr = ['', '', '', '', ''];
break;
case 6:
arr = ['', '', '', '', '', ''];
break;
}
return arr;
},
//塞1-28/29/30/31
filldate: function (year, month) {
var month = month;
var year = year;
var cond1 = year % 4 == 0; //条件1：年份必须要能被4整除
var cond2 = year % 100 != 0; //条件2：年份不能是整百数
var cond3 = year % 400 == 0; //条件3：年份是400的倍数
//当条件1和条件2同时成立时，就肯定是闰年，所以条件1和条件2之间为“与”的关系。
//如果条件1和条件2不能同时成立，但如果条件3能成立，则仍然是闰年。所以条件3与前2项为“或”的关系。
//所以得出判断闰年的表达式：
var cond = cond1 && cond2 || cond3;
if (cond) {
var daynum = 29;
} else {
var daynum = 28;
}
var montharr = [];
switch (month) {
case 2:
for (var i = 0; i < daynum; i++) {
montharr.push(i + 1);
}
break;
case 4:
for (var i = 0; i < 30; i++) {
montharr.push(i + 1);
}
break;
case 6:
for (var i = 0; i < 30; i++) {
montharr.push(i + 1);
}
break;
case 9:
for (var i = 0; i < 30; i++) {
montharr.push(i + 1);
}
break;
case 11:
for (var i = 0; i < 30; i++) {
montharr.push(i + 1);
}
break;
default:
for (var i = 0; i < 31; i++) {
montharr.push(i + 1);
}
}
return montharr;
}
onLoad: function(options) {
// 当前时间
var currentime = this.currentime();
// 计算出当月的日期塞进数组
var currentarr = this.nyr(currentime[0], currentime[1], 1).concat(this.filldate(currentime[0], currentime[1]));
this.setData({
currentime: currentime,
currentarr: currentarr
});
//console.log(this.nyr(currentime[0], currentime[1], 1), this.currentime(), currentarr);
},
//上个月
promonth() {
var currentime = this.data.currentime;
// 当前时间
currentime[1]--;
if (currentime[1] <= 0) {
currentime[1] = 12;
currentime[0]--;
}
// 计算出当月的日期塞进数组
var currentarr = this.nyr(currentime[0], currentime[1], 1).concat(this.filldate(currentime[0], currentime[1]));
this.setData({
currentime: currentime,
currentarr: currentarr
});
},
//下个月
nextmonth() {
var currentime = this.data.currentime;
// 当前时间
currentime[1]++;
if (currentime[1]>12){
currentime[1] = 1;
currentime[0]++;
}
// 计算出当月的日期塞进数组
var currentarr = this.nyr(currentime[0], currentime[1], 1).concat(this.filldate(currentime[0], currentime[1]));
this.setData({
currentime: currentime,
currentarr: currentarr
});
},
