周日历

H5页面选择周日历

<template>
<div  class="weekSelect"> 
  <van-picker
  title='选择周'
  show-toolbar
  :default-index="currentWeekIndex"
  @confirm='submitWeek'
  @cancel='closeFun'
     />
</div>
</template>
<script>

export default {
    data(){
        return{
           weekColumns:[],
           currentWeekIndex:'',
           currentYear:'',
           currentMonth:'',
           currentWeek:'',
           weekCount:'',
           monthSelectShow:false,
           minDate:new Date(2021,4,1),
           maxDate:new Date(2025,3,3),
           currentSelectMonth:new Date()
        }
    },
    components:{
       
    },
    created(){
     this.getCurrent();
     this.getCurrentWeek(new Date())
     this.getWeekCount(this.currentYear,this.currentMonth)
     this.getWeekList(this.currentYear,this.currentMonth)
    },
    methods:{
        //获取当前周
        getCurrentWeek(date){
            let day = date.getDay();
            let deltaDay;
            if(day==0){
                deltaDay = 6;
                addDay = 0;
            }else{
                deltaDay = day-1;
                addDay = 7-day;
            }
            let monday = new Date(date.getTime()-deltaDay*24*60*60*1000);
            let sunday = new Date(date.getTime()+addDay*24*60*60*1000);
            this.currentWeek = this.formatDate(sunday,"end")

        },
           //获取每月有几周
           getWeekCount(year,month){
               let d = new Date();
               //该月第一天
               d.setFullYear(year,month-1,1);
               let w1 = d.getDay();
               if(w1 ==0)w1=7;
               //该月天数
               d.setFullYear(year,month,0);
               let dd = d.getDate();
               //第一个周一
               let d1;
               if(w1 !=1)d1 = 7 - w1 +2;
               else d1 = 1
               this.weekCount = Math.ceil((dd-d1+1)/7);
              

           },

 //获取每月星期的周天区间
               getWeekList(year,month){
                   let d = new Date();
                     //该月第一天
               d.setFullYear(year,month-1,1);
               let w1 = d.getDay();
               if(w1 ==0)w1=7;
               //第一个周一
               let d1;
               if(w1 !=1){d1 = 7 - w1 +2}
               else {d1 = 1}
let firstMonday = `${year}-${month}-${d1}`
               let firstSunday = this.getNewData(firstMonday,6)
             let arr = []
             for(let i=0;i<this.weekCount;i++){
                 let str = this.getNewData(firstMonday,7*i)+this.getNewData(firstMonday,6*(i+1)+i,'end')
                 arr.push(str)
             }
             if(d1!==1){
                 let preStr = this.getNewData(fistMonday,-7)+this.getNewData(firstMonday,-1,'end');
                 arr.unshift(preStr)
             }
             let select = '选项'
             arr.unshift(select)
             arr.push(select)
             this.weekColumns=arr
             //获取当前周的下标
             if(arr.indexOf(String(this.currentWeek))){
                 let index = -1;
                 for(let i=0;i<arr.length;i++){
                     if(this.currentWeek===arr[i]){
                         index = i;
                         break;
                     }
                 }
                 this.currentWeekIndex = index
             }else{
                 this.currentWeekIndex = 3
             }



               },
               //获取指定时间后N天日期
               getNewData(dateTemps,days,type){
                   let dateTemp = dateTemps.split('-');
                   let nnDate = dateTemp[1]+'-'+dateTemp[2]+'-'+dateTemp[0];//转换为MM-DD-YYYY格式
                   let nDate = new Date(nnDate.replace(/\s+/g,''));//去除空格
                   let millSeconds = Math.abs(nDate) + (days*24*60*60*1000)
                   let rDate = new Date(millSeconds);
                   let year = rDate.getFullYear();
                   let month = rDate.getMonth()+1;
                   if(month<10)month = '0'+month;
                   let date = rDate.getDate();
                   if(date<10)date = '0'+date
                   if(type==='end'){
                       return `-${month}月${date}日`
                   }else{
                       return `${year}年${month}月${date}日`
                   }
               },
               //获取选择的月份
               submitSelectMonth(val){
                   let date = new Date(val)
                   this.currentYear = date.getFullYear()
                   this.currentMonth = date.getMonth()+1;
                   
               },
               formatDate(date,type){
                   if(type==='end'){
                       return `-${date.getMonth()+1}月${date.getDate()}日`
                   }else{
                       return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
                   }
               }




    }
   

       
    
};
</script>

<style scoped lang="scss">

</style>