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

忘是亡心i 2022-12-10 02:28 556阅读 0赞

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

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

disabledDate: time => \{

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

\},

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

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

> <el-date-picker
> 
>        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
> 
>         \}"
> 
>        >
> 
>    </el-date-picker>

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");
> 
>     \},

## ##

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

> <template>
> 
>     <div>
> 
>     <el-date-picker
> 
>            v-model="startdate"
> 
>            type="datetime"
> 
>            placeholder="选择开始日期"
> 
>            value-format="yyyy-MM-dd HH:mm:ss"
> 
>            @change="changeEnddate()"
> 
>            >
> 
>        </el-date-picker>
> 
>       <el-date-picker
> 
>            v-model="enddate"
> 
>            type="datetime"
> 
>            placeholder="选择结束日期"
> 
>            value-format="yyyy-MM-dd HH:mm:ss"
> 
>            :picker-options="\{
> 
>                     disabledDate: time => \{
> 
>                         return time.getTime() > new Date(this.startdate).getTime()|| time.getTime() < new Date(this.startdate).getTime()-20\*3600\*1000
> 
>                     \},
> 
>                     selectableRange: dafaulttime
> 
>                 \}"
> 
>            >
> 
>        </el-date-picker>  
>  
> 
>     </div>
> 
> </template>
> 
> <script>
> 
>     export default \{
> 
>         data() \{
> 
>             return \{
> 
>                 startdate:"",
> 
>                 enddate:"",
> 
>                 dafaulttime:"",
> 
>             \};
> 
>         \},
> 
>         methods: \{
> 
>             //把时间戳改成2020-09-24 00:00:00格式的时间
> 
>             formatDate(data) \{ 
> 
>                 let now = new Date(data);  
> 
>                 var hour=now.getHours()< 10 ? ('0' +now.getHours()):now.getHours();    
> 
>                 var minute=now.getMinutes()< 10 ? ('0' +now.getMinutes()):now.getMinutes(); 
> 
>                 var second=now.getSeconds()< 10 ? ('0' +now.getSeconds()):now.getSeconds(); 
> 
>                 return hour+":"+minute+":"+second; 
> 
>                 \}, 
> 
>              changeEnddate()\{
> 
>                 let dafaulttime=new Date(this.startdate).getTime()+5\*60\*1000;//开始时间之后的五分钟时间戳
> 
>                 this.dafaulttime=this.formatDate(new Date(this.startdate).getTime())+"-"+this.formatDate(dafaulttime);
> 
>             \},            
> 
>         \},
> 
>     \}
> 
> </script>