element-ui日期时间选择器限制时间的可选择的范围,只能选五分钟之内的时间

只能选择今天的当前时间的五分钟之内。

首先控制日期只能选择今天

disabledDate: time => {

            return time.getTime() > new Date()|| time.getTime() < new Date()-20*3600*1000

          },

然后控制时间。使用的selectableRange="07:00:00-12:23:00"这样的格式就是只能选择这个时间段

这个时间段写了一个方法获取。

       v-model="value1"

       type="datetime"

       placeholder="选择日期"

       value-format="yyyy-MM-dd HH:mm:ss"

       format="yyyy-MM-dd HH:mm:ss"

       :default-time="getTime('nowtime')"

        :picker-options="{

          disabledDate: time => {

            return time.getTime() > new Date()|| time.getTime() < new Date()-20*3600*1000

          },

          selectableRange: dafaulttime

        }"

       >

   

 data里面定义

 dafaulttime:"",

        value1:'',

methods: {

      getTime(type){

        var date=new Date();     //1. js获取当前时间

        var min=date.getMinutes();  //2. 获取当前分钟

        if(type=='endtime'){date.setMinutes(min+5);} //3. 设置当前时间+5分钟:把当前分钟数+5后的值重新设置为date对象的分钟数

        var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()

        var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()

        var s = date.getSeconds() < 10 ? ('0' + date.getseconds()) : date.getSeconds()

        var formatdate = h + ":" + f + ":" + s;

        return formatdate;

        //console.log(formatdate) // 获取5分钟后的时间,格式为 h:f:s

      },  

        

    },

    mounted() {

          this.dafaulttime=this.getTime("nowtime")+"-"+this.getTime("endtime");

    },

 

 

 

从上面例子我们也可以做到:选择开始日期时间和结束日期时间的时间段。开始时间不限制。当开始时间选定了结束时间必须和开始在同一天,而且时间必须是五分钟之内。

 

 

你可能感兴趣的:(element-ui)