vue+elementUI日期选择器实现选择日期，自动对应周几，并且是包含所选择日期的一周的日期

vue+elementUI日期选择器实现选择日期，自动对应周几

 之前在公司的项目里面遇到这个问题，如今想起来在这里总结一下，如果有更好的方法，请各位大神多多指教。

在template里面给选择日期的el-date-picker一个监听事件change，我定义的是toWeek事件，v-show根据自己项目的需求可以根据条件控制显示和隐藏，focus事件是选择日期有焦点的时候，实行一些事件操作

 <div class="block riqi" v-show=see>
    <span class="check-add-del-span">日期span>
     <el-date-picker
       v-model="gradeDate"
       @focus="riqi"
       type="date"
       placeholder="选择日期"
       format="yyyy年MM月dd日"
       value-format="yyyy-MM-dd"
       @change="toWeek"
       >
     el-date-picker>
 div>

在template中写显示日期和对应周几的表格table，我这里用的是elementUI里面的table组件，该组件的prop属性来接收获取到的数据，下面我定义的是label和timez，如下：

<el-table
   :data="timeData"
   style="width: 100%">
   <el-table-column width="80" label="周" fixed="left" prop="label" align="center" :formatter="week"> el-table-column>
   <el-table-column width="150" label="日期" prop="timez" align="center">el-table-column>
el-table>

还需在data里面声明一些变量，如下：

   data(){
     return{
       gradeDate:'',//所选择的日期
       timeData:[]//存放表格数据
     }
   }

在methods里面写toWeek事件，如下：

//监听点击日期对应周几
    toWeek(){
       var Setime = this.gradeDate; //给所选择的日期一个变量名
       var ji = new Date(Setime).getDay() //将日期转换成周
       var date = new Date(Setime); //指定在对象中存储的日期
       var timeList = []
      //  console.log(date)
       for(var i=1-ji;i<8-ji;i++){ //根据选定的星期进行循环一周
        var q = new Date(); //获取当前日期
        // console.log(i);
        let tt = q.setTime(date.getTime() + 3600 * 1000 * 24*i);//将当前日期设置成指定日期的前i天的毫秒日期
        let td = new Date(tt); //将获取到的毫秒日期指定到对象中存储
        let time = td.getFullYear() + "-" + (td.getMonth()+1) + "-" + td.getDate(); //将毫秒日期转为年月日格式
        // console.log(time);
        timeList.push(time) //将根据选择的日期循环出来一周的日期放进数组里面
      }   
       var that = this;
          that.$http.post('接口地址',{
           //参数，没有可以空着
          }).then(res=>{
            console.log(res.data.data);
          if(res.data.data!=undefined&&res.data.data.length>0){
              this.timeData=[];
              for(var i=0;i<res.data.data.length;i++){
                    this.timeData.push({
                    timez:timeList[i],//后台返回的数据是7条，下标就是0-6，刚好可以作为timelist的下标来取对应下面周几的日期
                    label:res.data.data[i].weekday//后台返回的1-7，即周一到周日是固定显示的
                  })
              }
            }else{
              this.$message.success('查询失败！');
            } 
          }).catch(err =>{
           
        })                  			    
    },

上面的代码是我和后台交互的时候来获取的周，如果不需要请求，只做那个效果的话可以这样：

  //监听点击日期对应周几
    toWeek(){
       var Setime = this.gradeDate; //给所选择的日期一个变量名
       var ji = new Date(Setime).getDay() //将日期转换成周
       var date = new Date(Setime); //指定在对象中存储的日期
       var timeList = []
      //  console.log(date)
       for(var i=1-ji;i<8-ji;i++){ //根据选定的星期进行循环一周
        var q = new Date(); //获取当前日期
        // console.log(i);
        let tt = q.setTime(date.getTime() + 3600 * 1000 * 24*i);//将当前日期设置成指定日期的前i天的毫秒日期
        let td = new Date(tt); //将获取到的毫秒日期指定到对象中存储
        let time = td.getFullYear() + "-" + (td.getMonth()+1) + "-" + td.getDate(); //将毫秒日期转为年月日格式
        // console.log(time);
        timeList.push(time) //将根据选择的日期循环出来一周的日期放进数组里面
      }
        this.timeData = [];
        for(var i=0;i<7;i++){
          this.timeData.push({
            timez:timeList[i],
            label:i+1
          })
        }
    },

table中显示周的prop:label接收到的数据是数字1-7，直接显示出来用户体验不好，所以用了table的一个属性:formatter，常常用来格式化内容：

Function(row, column, cellValue, index)

可以在methods里面写个事件:formatter=“week”，结合switch语句，如下：

 //周一到周日
    week(row,column){
      switch(row.label){
        case 1:
              return '周一';
              break;
        case 2:
              return '周二';
              break;
        case 3:
              return '周三'; 
              break;
        case 4:
              return '周四';
              break; 
        case 5:
              return '周五';
              break;
        case 6:
              return '周六';
              break; 
        case 7:
              return '周日';
              break;      
      }

以上完成后，页面上选择日期，表格里面显示的就是包含你所选择的日期的一周7天的日期和对应的周几了，鉴于是公司项目，就不方便截图展示了。
完结，不足之处可以给我指点指点哟。