小程序实现带年月选取效果的日历

小程序实现带年月选取效果的日历

本文实例为大家分享了小程序日历展示的具体代码，供大家参考，具体内容如下

根据前面的日历，又遇到到个好玩的日历需求，分享给大家

这是个带年月左右选取的日历展示！并且当天的对应日会被高亮显示！下面看下实现代码！

1.wxml代码结构

{{year}}年{{month}}月

{{item}}

{{item.dateNum}}

{{item.weight}}

2.wxss代码结构

.date-show{

position: relative;

width: 250rpx;

font-family: PingFang-SC-Regular;

font-size: 40rpx;

color: #282828;

text-align: center;

margin: 59rpx auto 10rpx;

}

.lt-arrow,.rt-arrow{

position: absolute;

top: 1rpx;

width: 60rpx;

height: 60rpx;

}

.lt-arrow image,.rt-arrow image{

width: 14rpx;

height: 26rpx;

}

.lt-arrow{

left: -110rpx;

transform: rotate(180deg);

}

.rt-arrow{

right: -100rpx;

}

.header{

font-size: 0;

padding: 0 24rpx;

}

.header>view{

display: inline-block;

width: 14.285%;

color: #333;

font-size: 30rpx;

text-align: center;

border-bottom: 1px solid #D0D0D0;

padding: 39rpx 0;

}

.weekMark{

position: relative;

}

.weekMark view{

position: absolute;

bottom: 0;

left: 0;

width: 100%;

border-bottom: 1px solid #22A7F6;

}

.date-box{

font-size: 0;

padding: 10rpx 0;

}

.date-box>view{

position: relative;

display: inline-block;

width: 14.285%;

color: #020202;

font-size: 40rpx;

text-align: center;

vertical-align: middle;

margin: 15rpx 0;

}

.date-head{

height: 60rpx;

line-height: 60rpx;

font-size: 26rpx;

}

.nowDay .date-head{

width: 60rpx;

border-radius: 50%;

text-align: center;

color: #fff; http://

background-color: #22A7F6;

margin: 0 auto;

}

.date-weight{

font-size: 22rpx;

padding: 15rpx 0;

}

.nowDay .date-weight{

color: #22A7F6;

}

.one{

position: absolute;

bottom: 0;

right: 5rpx;

width: 20rpx;

height: 20rpx;

border-radius: 50%;

background-color: red;

}

.two{

position: absolute;

bottom: 30rpx;

right: 5rpx;

width: 20rpx;

height: 20rpx;

border-radius: 50%;

background-color: blue;

}

index.js

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

year: 0,

month: 0,

date: ['日', '一', '二', '三', '四', '五', '六'],

dateArr: [],

isToday: 0,

isTodayWeek: false,

todayIndex: 0

},

onLoad: function () {

let now = new Date();

let year = now.getFullYear();

let month = now.getMonth() + 1;

this.dateInit();

this.setData({

year: year,

month: month,

isToday: '' + year + month + now.getDate()

})

},

dateInit: function(setYear,setMonth){

//全部时间的月份都是按0~11基准，显示月份才+1

let dateArr = []; //需要遍历的日历数组数据

let arrLen = 0; //dateArr的数组长度

let now = setYear ? new Date(setYear,setMonth) : new Date();

let year = setYear || now.getFullYear();

let nextYear = 0;

let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数

let nextMonth = (month + 1) > 11 ? 1 : (month + 1);

let startWeek = new Date( year+','+(month + 1)+','+1).getDay(); //目标月1号对应的星期

let dayNums = new Date(year,nextMonth,0).getDate(); //获取目标月有多少天

let obj = {};

let num = 0;

if(month + 1 > 11){

nextYear = year + 1;

dayNums = new Date(nextYear,nextMonth,0).getDate();

}

arrLen = startWeek + dayNums;

for(let i = 0; i < arrLen; i++){

if(i >= startWeek){

num = i - startWeek + 1;

obj = {

isToday: '' + year + (month + 1) + num,

dateNum: num,

weight: 5

}

}else{

obj = {};

}

dateArr[i] = obj;

}

this.setData({

dateArr: dateArr

})

let nowDate = new Date();

let nowYear = nowDate.getFullYear();

let nowMonth = nowDate.getMonth() + 1;

let nowWeek = nowDate.getDay();

let getYear = setYear || nowYear;

let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;

if (nowYear == getYear && nowMonth == getMonth){

this.setData({

isTodayWeek: true,

todayIndex: nowWeek

})

}else{

this.setData({

isTodayWeek: false,

todayIndex: -1

})

}

},

lastMonth: function(){

//全部时间的月份都是按0~11基准，显示月份才+1

let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;

let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;

this.setData({

year: year,

month: (month + 1)

})

this.dateInit(year,month);

},

nextMonth: function(){

//全部时间的月份都是按0~11基准，显示月份才+1

let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;

let month = this.data.month > 11 ? 0 : thhttp://is.data.month;

this.setData({

year: year,

month: (month + 1)

})

this.dateInit(year, month);

}

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。