Element UI 日期控件范围限制

发布时间 2023-04-21 15:28:59作者: 小阿飞ZJF

1、设置开始时间不能大于结束时间

<el-date-picker type="date" placeholder="开始时间" v-model="startTime" :picker-options="pickerOptionsStart"></el-date-picker>
<el-date-picker type="date" placeholder="结束时间" v-model="endTime"   :picker-options="pickerOptionsEnd"  ></el-date-picker>

 

data() {
  return {
    // 开始日期限制
    pickerOptionsStart: {
      disabledDate: (time) => {
        if (this.endTime) {
          return (
            time.getTime() >= new Date(this.endTime).getTime()
          );
        }
      }
    },
    // 结束日期限制
    pickerOptionsEnd: {
      disabledDate: (time) => {
        if (this.startTime) {
          return (
            time.getTime() <= new Date(this.startTime).getTime()
          );
        }
      }
    }
  }
}