获取未来时间 一年或N年

需求 展示从本月初开始 一年的时间 或N年的时间 以便用户选择

思路 一年12个月 是已知的 从本月到12月可以生成本年的每天数据

从1月至上月可以生成所需得到最后一年的数据

今年加最后一年的月份可拼接一年时间 所以中间年份是所需年分-1的数组数据

中间年份都是1-12月 可以通过年份加1获取今年至N年的每天数据

效果图

下面是方法的分解 在最后会提供一个完整的demo

1. • 获取本月至年末的 以月划分 每日时间

let date = new Date() //获取当前时间
let [currentYear, currentMonth] = [date.getFullYear(), date.getMonth() + 1] //获取当前年 月
//一年为12月 用月份减去当前月+1 为今年所剩余的月份 生成与月份相同长度的数组 存储每月天数
let current_year = new Array(12 - currentMonth + 1).fill({}).map((item, index) => {
    return {
        year: currentYear,
        month: index + currentMonth,
        days: this.setDays(currentYear, index + currentMonth)
    }
})
//setDays 通过获取月份天数生成与天数相同长度的数组 存储每天的时间戳 及相关数据 返回生成的数组 
//参数year，month需要获取每月天数的年和月
this.setDays = function(year, month) {
    return new Array(new Date(year, month, 0).getDate()).fill({}).map((v, i) => {
       return {
            time_stamp: parseInt(new Date(year, month, i + 1).getTime() / 1000),
            day: i + 1,
            check: false,
       }
    })
}

1. • 获取最后一年 年初至结束月份 每日时间

//一年为12月 当前月份减1 为最后一年所需的月份长度 生成与月份相同长度的数组 存储每月天数
//this.config.year 为所要获取的年数 加上当前年及为最后1年年份
let last_year = new Array(currentMonth - 1).fill({}).map((item, index) => {
    return {
       year: currentYear + this.config.year,
       month: index + currentMonth,
       days: this.setDays(currentYear + this.config.year, index + currentMonth)
   }
})

1. • 获取本年和最后一年的中间年份每日数据 因为不确定是需要几年 所以这里要生成一个二维数组 以便存储

//this.config.year 所需年数
// 所需年数 this.config.year-1 是需要减去本年和最后一年拼接出来的一年
//生成年数-1长度的数组 数组中为12个月的基础数据
//循环月份的数组生成月份对应的每日数据 
let middle_year = new Array(this.config.year - 1).fill([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]).map((item, index) => {
    return new Array(item.length).fill({}).map((v, k) => {
            return {
               year: currentYear + index + 1,
               month: k + 1,
               days: this.setDays(currentYear + index + 1, k + 1)
            }
       })
})

1. • 合并本年中间年和最后一年数据

//因中间年为二维数组 所以需要展开一下 才能拼接
this.TIME_ARRAY = [...current_year, ...middle_year.flat(Infinity), ...last_year]
console.log(this.TIME_ARRAY) //这里可以看到生成的数据

1. • 数据渲染

//获取日期对应的星期
this.setWeek = function(time) {
    let dayArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
     if (time.toString().length < 13) time = time * 1000
          return dayArr[new Date(time).getDay()]
}
//循环渲染数据
this.setHtml = function() {
    $(this.config.el).html(
                    `
       ${this.TIME_ARRAY.map(item=>{
            return `

                    
${item.year+'年'+item.month}月 全选
                  

                      

                      ${item.days.map(v=>{
                          return `

                          
${this.setWeek(v.time_stamp)}
                          
${v.day}日
                        
`
                     }).join('')}
                    
                
            
`
         }).join('')}
       `
       )
}
//执行方法渲染数据
this.setHtml()

以下是完整的demo