wxml中代码:
<view class="gradient">
<view class="box">
<view class="spaceAroundCenter">
<view class="flex-item">
<view class="item-content">
<view class="glyphicon noneMeet" wx:if="{{currentYue==selectYue}}">《</view>
<view bindtap="doDay" data-key='left' class="glyphicon glyphicon-triangle-left" wx:else>《</view>
</view>
</view>
<view class="flex-item item-content-current-day">
<view class="item-content">{{currentDate}}</view>
</view>
<view class="flex-item">
<view class="item-content" bindtap="doDay" data-key="right">
<view class="glyphicon glyphicon-triangle-right">》</view>
</view>
</view>
</view>
<view class="spaceAroundCenter">
<view>一</view>
<view>二</view>
<view>三</view>
<view>四</view>
<view>五</view>
<view>六</view>
<view>日</view>
</view>
<view class="spaceAroundCenter">
<view class="flex-item" wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}">
<view id='{{key}}' data-val='{{vo}}' class="item-content bk-color-day" wx:if="{{vo == currentDay}}">{{vo}}</view>
<view id='{{key}}' data-val='{{vo}}' class="item-content bk-color-dayClick" wx:elif="{{key == currentClickKey && currentClickKey != '' && vo != ''}}">{{vo}}</view>
<view id='{{key}}' class="item-content noneMeet" wx:elif="{{ vo< currentDay&& vo != ''&¤tYue==selectYue}}">{{vo}}</view>
<view id='{{key}}' data-val='{{vo}}' class="item-content" bindtap='onClickItem' wx:else>{{vo}}</view>
</view>
</view>
</view>
</view>
js中代码:
Page({
data: {
currentDate: "", //当前年月
dayList: '',//当前年月
currentDayList: '',
currentObj: '', //当前年月日
currentDay: '',//当前日
currentClickKey: '',
},
onLoad: function(options) {
var currentObj = this.getCurrentDayString()
this.setData({
currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
currentDay: currentObj.getDate(),
currentYue: currentObj.getMonth() + 1,
selectYue: currentObj.getMonth() + 1,
currentObj: currentObj
})
this.setSchedule(currentObj)
console.log("currentYue");
console.log(currentObj.getMonth() + 1);
},
doDay: function(e) { //前一个月后一个月
var that = this
var currentObj = that.data.currentObj
var Y = currentObj.getFullYear();
var m = currentObj.getMonth() + 1;
var d = currentObj.getDate();
var str = ''
if (e.currentTarget.dataset.key == 'left') {
m -= 1
if (m <= 0) {
str = (Y - 1) + '/' + 12 + '/' + d
} else {
str = Y + '/' + m + '/' + d
}
} else {
m += 1
if (m <= 12) {
str = Y + '/' + m + '/' + d
} else {
str = (Y + 1) + '/' + 1 + '/' + d
}
}
currentObj = new Date(str)
this.setData({
currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
currentObj: currentObj,
selectYue: currentObj.getMonth() + 1
})
this.setSchedule(currentObj);
console.log("selectYue");
console.log(currentObj.getMonth() + 1);
},
getCurrentDayString: function() { //获取当前年月日
var objDate = this.data.currentObj
if (objDate != '') {
return objDate
} else {
var c_obj = new Date()
var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()
return new Date(a)
}
},
setSchedule: function(currentObj) {
var that = this
var m = currentObj.getMonth() + 1
var Y = currentObj.getFullYear()
var d = currentObj.getDate();
var dayString = Y + '/' + m + '/' + currentObj.getDate()
var currentDayNum = new Date(Y, m, 0).getDate() //本月天数
var currentDayWeek = currentObj.getUTCDay() + 1 //返回星期几
var result = currentDayWeek - (d % 7 - 1);
var firstKey = result <= 0 ? 7 + result : result;
var currentDayList = []
var f = 0
for (var i = 0; i < 42; i++) {
let data = []
if (i < firstKey - 1) {
currentDayList[i] = ''
} else {
if (f < currentDayNum) {
currentDayList[i] = f + 1
f = currentDayList[i]
} else if (f >= currentDayNum) {
currentDayList[i] = ''
}
}
}
that.setData({
currentDayList: currentDayList,
dayString //当前日期2019/5/22
})
console.log("dayString");
console.log(dayString);
console.log("currentDayList");
console.log(currentDayList);
},
// 设置点击事件
onClickItem: function(e) {
console.log(JSON.stringify((e)));
console.log(e);
console.log(JSON.stringify((e.currentTarget)));
this.setData({
currentClickKey: e.currentTarget.id
});
}
})
wxss代码:
.spaceAroundCenter {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
.box {
margin: 30rpx;
}
.flex-item {
/* flex-flow: nowrap;
flex-grow: 1;
flex-shrink: 1; */
width: 14.2%;
}
.item-content {
padding: 25rpx 0;
text-align: center;
}
/* 当前日期 */
.bk-color-day {
color: #fff;
border-radius: 50%;
background-color: #ed7e2d;
}
/* 当前选中日期 */
.bk-color-dayClick {
color: #fff;
border-radius: 50%;
background-color: #3c8ce7;
}
.item-content-current-day {
flex-grow: 2;
}
.noneMeet{color: #ccc;
}