关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决。
HTML:给选择器加上:picker-options属性
//开始时间 <el-date-picker v-model="startDate"></el-date-picker> //截止时间 <el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>
DATA:
我这里就简略写下关键的。
data() { return { startDate: null, endDate: null, endDateOpt: { disabledData: (time) => { return time.getTime() < this.startDate; } } } }
以上是单个选择框的,如果是daterange或datetimerange的话:
<el-date-picker v-model="value1" type="daterange" :picker-options="pickerOptions"> </el-date-picker>
data() { return { value: '', pickerOptions2: { disabledDate: (time) => { return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&& } } }; }
PS:element 时间选择器,disabledDate同时限制多个条件
<el-date-picker v-model="listQuery.allDate" type="daterange" range-separator="-" unlink-panels value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" class="data_piccker" style="width:240px" :picker-options="pickerOptions" ></el-date-picker>
pickerOptions: { onPick: ({ maxDate, minDate }) => { this.pickerMinDate = minDate.getTime() if (maxDate) { this.pickerMinDate = '' } }, disabledDate: (time) => { const year = 365 * 24 * 3600 * 1000 //一年前的时间戳 let lastyear = this.pickerMinDate - year //已经选择一个日期则…… if (this.pickerMinDate !== '') { const day31 = 31 * 24 * 3600 * 1000 //选中的日期前推31天,的时间戳 let datarangeb = this.pickerMinDate - day31 //选中的日期后推31天 let datarangea = this.pickerMinDate + day31 //如果后推的日期早于今天,则设置为今日 if (datarangea > new Date()) { datarangea = new Date() } //使用或||可以同时限制多个条件 return time.getTime() < datarangeb || time.getTime() > datarangea } //未选择日期,默认状态当天之前不可选,一年之前不可取 return time.getTime() > Date.now() || time.getTime() < lastyear }, },
到此这篇关于ElementUI时间选择器限制选择范围disabledData的使用的文章就介绍到这了,更多相关ElementU disabledData内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- 前端elementUI?select选择器实现远程搜索
- VUE-ElementUI?时间区间选择器的使用
- ElementUI日期选择器时间选择范围限制的实现
- elementUI实现级联选择器
- elementui中的el-cascader级联选择器的实践
- Vue+ElementUI 中级联选择器Bug问题的解决
- vue ElementUI级联选择器回显问题解决
转载请注明出处:http://www.ahjqwny.com/article/20230312/126469.html