element ui 实现开始时间、结束时间联动

时间:2019-12-26
本文章向大家介绍element ui 实现开始时间、结束时间联动,主要包括element ui 实现开始时间、结束时间联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
  • 在时间控件上绑定picker-options属性
 1 <el-date-picker
 2               v-model="startTime"
 3               type="date"
 4               placeholder="选择开始日期"
 5               size="small"
 6               :picker-options="pickerOptions0"
 7             /> -
 8             <el-date-picker
 9               v-model="endTime"
10               type="date"
11               placeholder="选择结束日期"
12               size="small"
13               :picker-options="pickerOptions1"
14             />
  • 绑定data
  • 定义方法
     1  pickerOptions0: {
     2         disabledDate: (time) => {
     3           if (this.endTime !== '' && this.endTime != null) {
     4             return time.getTime() > this.endTime
     5           } else {
     6             return time.getTime() < this.endTime
     7           }
     8         }
     9       },
    10       pickerOptions1: {
    11         disabledDate: (time) => {
    12           if (this.startTime !== '') {
    13             return time.getTime() < this.startTime
    14           }
    15         }
    16       }

原文地址:https://www.cnblogs.com/janet11/p/12102346.html