在开发这个功能的时候，也找了好多资料，最后看到这个朋友的分享，在他的基础进行了修改 一只敲码的猫 这个兼容IOS和安卓
话不多说，先上效果图
html
<view>
<navigation class="sunnavigation" title="{{title}}"></navigation>
<view class="container">
<!-- 日历年月 -->
<view class='calendar_title flex_nowrap'>
<view class='icon' bindtap='lastMonth'>
<image src='/images/index/ico3.png' />
</view>
<view>{{year}}年{{month}}月</view>
<view class='icon icon1' bindtap='nextMonth'>
<image src='/images/index/ico3.png' />
</view>
</view>
<!-- 日历主体 -->
<view class='calendar'>
<view class="header_con">
<view class='header'>
<view wx:for='{{date}}' wx:key='idx' wx:for-index="idx" class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}
<view></view>
</view>
</view>
</view>
<view class='date-box'>
<block wx:for='{{dateArr}}' wx:key='idx' wx:key='idx'>
<view class='{{item.isSwith ? "nowDay" : ""}} {{item.sectionSwith ? "section" : ""}}'>
<view class='date-head' bindtap='lookHuoDong' data-year='{{year}}' data-month='{{month}}' data-item='{{item}}' data-datenum='{{item.dateNum}}'>
<view>{{item.dateNum}} </view>
</view>
</view>
</block>
</view>
</view>
<!-- 确定 -->
<view class="his_define {{enableSwith? 'active': ''}}" catchtap="defineTap">
确定
</view>
</view>
</view>
js
const app = getApp()
import util from '../../utils/util'
Page({
/**
* 页面的初始数据
*/
data: {
title: '历史记录',
year: 0, // 年
month: 0, // 月
date: ['日', '一', '二', '三', '四', '五', '六'],
dateArr: [],
isToday: 0,
isTodayWeek: false,
todayIndex: 0,
starTime: '', // 开始时间
endTime: '', // 结束时间
enableSwith: false, // 确定按钮 false禁用 true启用
},
/**
* 生命周期函数--监听页面加载
*/
onLoad (e) {
// 获取导航栏主动设置返回按钮
const nav = this.selectComponent('.sunnavigation')
nav.showBack()
console.log('e', e)
// 日历的
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
this.dateInit();
console.log('123','' + year + month + now.getDate())
this.setData({
year: year,
month: month,
isToday: '' + year + month + now.getDate()
})
},
// 生成日历数据
dateInit (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,
isSwith: false,
sectionSwith: false
}
} 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) {
console.log('进来1', nowYear, getYear,nowMonth, getMonth, nowWeek)
this.setData({
isTodayWeek: true,
todayIndex: nowWeek
})
} else {
console.log('进来2', nowYear, getYear,nowMonth, getMonth)
this.setData({
isTodayWeek: false,
todayIndex: -1
})
}
},
/**
* 上月切换
*/
lastMonth() {
//全部时间的月份都是按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;
let day = this.data.currentTime // 当前时间
// console.log(day)
this.setData({
year: year,
month: (month + 1),
isToday: ''
})
this.dateInit(year, month, day)
// 回显点击效果
this.echoDate()
},
/**
* 下月切换
*/
nextMonth() {
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
let month = this.data.month > 11 ? 0 : this.data.month;
let day = this.data.currentTime // 当前时间
this.setData({
year: year,
month: (month + 1),
isToday: ''
})
this.dateInit(year, month, day)
// 回显点击效果
this.echoDate()
},
// 跨年、跨月
echoDate(){
let dateArr = this.data.dateArr
let endTime = this.data.endTime
this.getDateArr(dateArr,endTime,2)
},
// 日历 日期点击方法
lookHuoDong(e) {
let dateArr = this.data.dateArr
let attr = e.currentTarget.dataset
// console.log('e', e, dateArr)
//
let starTime = new Date(this.data.starTime).getTime()
let endTime = new Date(this.data.endTime).getTime()
let isToday = new Date(attr.item.isToday).getTime()
if(!starTime) {
console.log('没有开始时间')
starTime = isToday
this.setData({
starTime
})
/*
参数： 日历数组，开始时间
*/
this.getDateArr(dateArr, starTime)
}else if(starTime && !endTime) {
if(starTime && starTime>isToday) {
console.log('有开始时间，但是点击的时间小于开始时间')
endTime = starTime
starTime = isToday
this.setData({
endTime,
starTime
})
this.getDateArr(dateArr, starTime)
} else {
console.log('没有结束时间')
endTime = isToday
this.setData({
endTime
})
this.getDateArr(dateArr, endTime)
}
}else if(starTime && endTime) {
console.log('有开始时间和结束时间')
if(starTime>isToday) {
console.log('有开始时间和结束时间，但是点击的时间小于开始时间')
endTime = starTime
starTime = isToday
console.log('复用', endTime, starTime)
this.setData({
endTime,
starTime
})
this.getDateArr(dateArr,starTime,2)
} else if(isToday>starTime){
endTime = isToday
this.setData({
endTime
})
this.getDateArr(dateArr,endTime,2)
}
}
},
// 处理数组，如果时间相等isSwith为true
getDateArr(arr,date, type) {
/*
参数
arr 数组 date 要选择的日期 另外一个时间
type 类型 1和2
*/
let starTime = this.data.starTime
let endTime = this.data.endTime
// console.log('arr',arr)
if(!type) {
arr.forEach(item => {
if(!item.isToday){
return
}
let isToday = new Date(item.isToday).getTime()
if(isToday == date) {
item.isSwith = true
}
if(starTime && endTime) {
console.log('123')
this.setData({
enableSwith: true
})
if(isToday>starTime && isToday<endTime) {
item.sectionSwith = true
} else {
item.sectionSwith = false
}
}
})
// console.log('dateArr', arr)
this.setData({
dateArr: arr
})
} else if(type ==2) {
this.setData({
enableSwith: true
})
console.log('date', starTime,endTime)
arr.forEach(item => {
if(!item.isToday){
return
}
item.isSwith = false
item.sectionSwith = false
})
// console.log('清空', arr)
arr.forEach(item => {
if(!item.isToday){
return
}
let isToday = new Date(item.isToday).getTime()
if(isToday == starTime || isToday == endTime) {
item.isSwith = true
}
if(isToday>starTime && isToday<endTime) {
item.sectionSwith = true
} else {
item.sectionSwith = false
}
})
this.setData({
dateArr: arr
})
}
},
// 确定按钮
defineTap() {
let starTime = this.data.starTime
let endTime = this.data.endTime
app.globalData.historyStar = starTime
app.globalData.historyEnd = endTime
wx.setStorageSync('historySwith', true)
// 返回一步
wx.navigateBack({
delta: 1
})
}
})
总结
这个难点就是在处理开始时间和结束时间，把他们之间的时间回显颜色，平常多看想多做，只能这样技术才能一点点提升，如果觉得有帮助记得帮助记得点赞关注，谢谢了
