小程序，横向滑动日期选择器（获取当前月前几个月的日期）
wxml：
{{item.yearMonth}}
wxss：
@import "/common/font/iconfont";（用到字体图标，下拉框箭头）
.contentBox{
height: 100%;
width: 100%;
}
.timeBox{
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1rpx solid #fff;
}
.leftTimeBox{
width: 15%;
height: 150rpx;
background: red;
color: #fff;
text-align: center;
line-height: 150rpx;
position: relative;
}
.rightTimeBox{
width: 85%;
height: 150rpx;
background: green;
}
.scroll_box{
width: 100%;
height: 150rpx;
padding: 0 15rpx;
overflow: hidden;
background: #ececec;
white-space: nowrap;
}
.item_list{
padding: 10rpx 5rpx;
height: auto;
margin-right: 23rpx;
display: inline-block;
}
.time{
width: 100rpx;
text-align: center;
border-radius: 10rpx;
}
.active{
background: red;
color: #fff;
}
.icon-xialakuang{
font-size: 50rpx;
color: #fff;
position: absolute;
bottom: -50rpx;
left: 50%;
margin-left: -25rpx;
}
.monthScroll{
width: 100%;
height: 100rpx;
line-height: 100rpx;
padding: 0 15rpx;
overflow: hidden;
background: #ececec;
white-space: nowrap;
}
.monthBox{
width: 180rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: red;
border-radius: 10rpx;
margin-right: 23rpx;
display: inline-block;
color: #fff;
}
js：
Page({
/**
* 页面的初始数据
*/
data: {
currentYear:'',//年
currentMonth:'',//月
currentDay:'',//日
currentWeek:'',//周
monthDaySum:[],//日集合
tapWeek: '',//点击的周
tapDate: '',//点击的日
toIndex:'time',//横向id的值
monthScroll:true,//月下拉框
circulationMonth: [],//循环的月
},
onShow(){
let nowTime=new Date()
let nowYear=nowTime.getFullYear()
let nowMoth=nowTime.getMonth()+1
let nowDay=nowTime.getDate()
let nowWeek=nowTime.getDay()
switch (nowWeek) {
case 0:
nowWeek = "日";
break;
case 1:
nowWeek = "一";
break;
case 2:
nowWeek = "二";
break;
case 3:
nowWeek = "三";
break;
case 4:
nowWeek = "四";
break;
case 5:
nowWeek = "五";
break;
case 6:
nowWeek = "六";
break;
}
this.setData({
currentMonth: nowMoth,
currentYear: nowYear,
currentDay: nowDay,
currentWeek: nowWeek,
tapWeek: nowWeek,
tapDate: nowDay,
})
let monthDaySum = this.getCurrentArr()//月的集合
this.setData({
monthDaySum: monthDaySum
})
this.setToIndex()//设置toIndex的值，使起自动跳到指定位置
this.getMonth()
},
onLoad: function (options) {
},
getMonth() {//获取几个月份
var dataArr = [];
var data = new Date();
var year = data.getFullYear();
data.setMonth(data.getMonth() + 1, 1)//获取到当前月份,设置月份
for (var i = 0; i < 6; i++) {
data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1
var m = data.getMonth() + 1;
m = m < 10 ? "0" + m : m;
dataArr.push(
{ yearMonth: data.getFullYear() + "-" + (m), month: m }
)
}
this.setData({
circulationMonth: dataArr
})
},
// 获取某年某月总共多少天
getDateLen(year, month) {
let actualMonth = month - 1;
let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);
return timeDistance / (1000 * 60 * 60 * 24);
},
// 获取当月数据，返回数组
getCurrentArr() {
let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 获取当月天数
let currentMonthDateArr = [] // 定义空数组
if (currentMonthDateLen > 0) {
for (let i = 1; i <= currentMonthDateLen; i++) {
let week=new Date(this.data.currentYear,this.data.currentMonth-1,i).getDay()
switch (week) {
case 0:
week= "日";
break;
case 1:
week= "一";
break;
case 2:
week= "二";
break;
case 3:
week= "三";
break;
case 4:
week= "四";
break;
case 5:
week= "五";
break;
case 6:
week= "六";
break;
}
currentMonthDateArr.push({
month: this.data.currentMonth, // 只是为了增加标识，区分上下月
date: i,
week:week
})
}
}
this.setData({
currentMonthDateLen
})
return currentMonthDateArr
},
tapTime(e){//点击某个时间
let week = e.currentTarget.dataset.week
let date = e.currentTarget.dataset.date
this.setData({
tapWeek:week,
tapDate:date,
monthScroll: true
})
// console.log(this.data.tapDate)
},
setToIndex() {//设置toIndex的值，使起自动跳到指定位置
this.setData({
toIndex:'time',
})
},
showMonth(){//
this.setData({
monthScroll: !this.data.monthScroll
})
},
chooseMonth(e){//选择月份
let currentMonth = e.target.dataset.item
this.setData({
currentMonth: currentMonth,
monthScroll: !this.data.monthScroll
})
let monthDaySum = this.getCurrentArr()//月的集合
this.setData({
monthDaySum: monthDaySum
})
}
})