需求描述
给定开始日期和结束日期,生成该区间范围内的日期数组,并支持按星期过滤
日期选择采用的是ElementUI DatePicker组件
生成所选日期区间完整数组
借用了dayjs的能力,dayjs().diff() 返回指定单位下两个日期时间之间的差异
getDatesBetweenDates(startDate, endDate) { // 传入开始时间和结束时间
const dateList = [startDate]
const diffDays = dayjs(endDate).diff(startDate, 'day') // 获取2个日期之前天数的差值,所以单位设置为了'day'
if (startDate === endDate) return dateList // 开始日期结束日期相同直接返回
let i = 1
while (i <= diffDays) {
let dateTime = new Date(dateList[i - 1])
dateTime = dateTime.setDate(dateTime.getDate() + 1) // setDate()会返回日期的毫秒数
const date = dayjs(dateTime).format('YYYY-MM-DD')
dateList.push(date)
if (date === endDate) {
break
}
i++
}
return dateList
},
按所选的星期,对数组进行过滤操作
这里给出复选框checkbox数据结构
weekly: [
{ label: '每周日', value: 0 },
{ label: '每周一', value: 1 },
{ label: '每周二', value: 2 },
{ label: '每周三', value: 3 },
{ label: '每周四', value: 4 },
{ label: '每周五', value: 5 },
{ label: '每周六', value: 6 }
],
最后对上一步获得的dateList进行过滤, 这里使用了dayjs.day(),它的返回值是number,0(星期天)到6(星期六)
// weeks是复选框选择之后的数据,例如【1,2】
// dayjs(item).day() 根据日期获取周几
dateList = dateList.filter(item => weeks.includes(dayjs(item).day()))
就得到了过滤后匹配了所选星期的数据。