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天的日期和对应的周几了，鉴于是公司项目，就不方便截图展示了。
完结，不足之处可以给我指点指点哟。