开机!生成日期区间数组按星期过滤

164 阅读1分钟

需求描述

给定开始日期和结束日期,生成该区间范围内的日期数组,并支持按星期过滤

image.png

日期选择采用的是ElementUI DatePicker组件

image.png

生成所选日期区间完整数组

借用了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
    },

按所选的星期,对数组进行过滤操作

image.png

这里给出复选框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()))

就得到了过滤后匹配了所选星期的数据。

开机打工,完结撒花,✿✿ヽ(°▽°)ノ✿