element-ui的el-date-picker组件(限制时间范围选择)
Posted longflag
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui的el-date-picker组件(限制时间范围选择)相关的知识,希望对你有一定的参考价值。
element-ui的el-date-picker组件有不同的type值能够实现不同的时间选择功能。能够通过pickoption限制选择的范围,但是某些时候我们需要对开始时间和结束时间进行相应的限制,
例如:
某个需求默认起始时间为昨日, 选择时间跨度不可超过366天,在这种情况下有两种解决办法,
1.写两个datepicke组件,把起始时间和结束时间的pickeroptions进行相应的限制,但是这样写的话就需要写较为繁琐的逻辑。
2.写一个datepicker组件,将type设置为daterange,这时就只用写一个pickeroptions进行时间的限制(实现方法如下)。
<el-date-picker v-model="ruleForm.date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions1"> </el-date-picker> //组件 //限制 pickerOptions1:{ onPick: (obj) => { this.pickerMinDate = new Date(obj.minDate).getTime(); console.log(obj) }, disabledDate:(time)=> { if (this.pickerMinDate) { const day1 = 366 * 24 * 3600 * 1000 let maxTime = this.pickerMinDate + day1 let minTime = this.pickerMinDate - day1 return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()-1 * 24 * 3600 * 1000 }else{ return time.getTime() > Date.now()-1 * 24 * 3600 * 1000 } } },
第二种方法中含有一个onpick的函数能够将第一次点击后获取的时间拿到,这时,如果需求中有开始时间和结束时间的联动的话,我们就能够通过这个函数进行设置。
以上是关于element-ui的el-date-picker组件(限制时间范围选择)的主要内容,如果未能解决你的问题,请参考以下文章
2020-06-30 关于element-ui中el-date-picker组件时间落后8个小时的问题