Element多日期选择器的问题

一、使用了Element的多日期选择器
       可以去官网查看需要的日期插件 http://element-cn.eleme.io/#/zh-CN/component 
        
 二、这里说一下多个日期选择使用遇到的问题 

        设置不可选择的日期 （置灰今天之前的日期）

er>

     

      type="dates"

     v-model="classRomDate"

     @change="showClassRomDate" //绑定的修改的方法

     :picker-options="pickerOptions1"  //设置选择范围

     placeholder="选择一个或多个日期">

// 定义参数

export default {

     data() {

           pickerOptions1:{

               disabledDate(time) {

                    return time.getTime() <= Date.now();   //设置不可点击时间为今天之前的时间

                }

          },

         classRomDate: '', // 设置多个预约时间是数组类型

         dateStr: '', //多个预约时间

         defaultDate:'',

     }

}

    日期选择默认选择日期

    使用v-model已经绑定了参数值，那么直接给v-model赋值就可以了，但需要注意的是dates是多选日期插件，值是数组类型，并且如果将值进行了转换这里也需要执行一下修改的方法：

日期选择后的方法，将多日期转换为字符串类型传递到form表单中。  

showClassRomDate(val){

     // 多个日期选择的时候

     if(val == null){

         return;

     }

     var bookedAllDate = "";

     for(var i=0; i < val.length; i++){

           var tmpdate=val[i].getDate()+"";

           if(tmpdate.length == 1){

                 tmpdate="0"+tmpdate;

            }

          var month = val[i].getMonth()+1+"";

         if(month.length == 1){

                       month = "0" + month;

           }

             bookedAllDate += val[i].getFullYear()+"-"+month+"-"+tmpdate + ",";

       }

       this.dateStr = bookedAllDate;

}

默认日期修改则需要在一进入页面给v-model的classRomDate 赋值，然后执行修改方法，将默认值加到form表单参数中

// 修改日历默认的值,先清空再赋值（需要将日期设置为0点，否则输入框只展示默认日期，展开无法选中默认日期）

this.classRomDate = [new Date(new Date(detail.strDate).setHours(0,0,0,0))]

this.showClassRomDate(this.classRomDate)；