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

时间:2020-7-31 作者:admin


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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。