element-ui el-date-picker控制开始时间不能大于结束时间

最新推荐文章于 2025-09-18 09:39:50 发布

转载最新推荐文章于 2025-09-18 09:39:50 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lemonfive/blog/3044424

文章标签：

#ui #javascript #python #ViewUI

本文介绍了一个使用Element UI组件实现的预算时间选择器，通过两个日期选择器分别设置开始时间和结束时间，确保开始时间小于结束时间，同时提供了代码实现。

2019独角兽企业重金招聘Python工程师标准>>>

需要：搜索选择查询日期，开始时间需要小于结束时间，结束时间要受限开始时间。

效果如图所示

代码如下：

HTML部分：

<div class="demo-input-suffix">
  <span class="title">转预算时间：</span>
  <el-date-picker
    :editable="false"
    v-model="startBudgetTime"
    :picker-options="pickerOptionsStart"
    size="mini"
    type="datetime"
    value-format="timestamp"
    format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择开始日期"
    @change="changeEnd"/>-
  <el-date-picker
    :editable="false"
    v-model="endBudgetTime"
    :picker-options="pickerOptionsEnd"
    size="mini"
    type="datetime"
    value-format="timestamp"
    format="yyyy-MM-dd HH:mm:ss"
    default-time="['23:59:59']"
    placeholder="选择结束日期"
    @change="changeStart"/>
</div>

js部分

export default {
  data() {
    return {
      // 限制开始时间
      pickerOptionsStart: {},
      pickerOptionsEnd: {},
      startBudgetTime: '', // 预算开始时间
      endBudgetTime: '', // 预算结束时间
    }
  },
  methods: {
    // 结束时间限制开始时间
    changeStart() {
      if (!this.endBudgetTime) {
        this.pickerOptionsStart = {
          disabledDate: {}
        }
        return
      }
      this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
        // 可通过箭头函数的方式访问到this
        disabledDate: (time) => {
          var times = ''
          times = time.getTime() > this.endBudgetTime
          return times
        }
      })
    },
    // 开始时间 控制结束时间
    changeEnd() {
      if (!this.startBudgetTime) {
        this.pickerOptionsEnd = {
          disabledDate: {}
        }
        return
      }
      this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
        disabledDate: (time) => {
          return time.getTime() < this.startBudgetTime
        }
      })
    },
  }
}

转载于:https://my.oschina.net/lemonfive/blog/3044424