element-ui DateTimePicker 日期选择日期禁用

最新推荐文章于 2024-07-26 13:48:52 发布

大白的博客

最新推荐文章于 2024-07-26 13:48:52 发布

阅读量3.1k

点赞数

分类专栏： vue2.0 文章标签： Vue.js 日期选择器 disabledDate 时间区间前端开发

本文链接：https://blog.csdn.net/Rainbow1995/article/details/109125217

版权

vue2.0 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

日期区间选择器，当开始时间变化，就将之前的日期禁用，结束日期变化，就将此日期之后的禁用，效果如图

主要用到的参数

picker-options

当前时间日期选择器特有的选项参考下表

<template>
    <el-form ref="form" :rules="rules" :model="form" :label-width="180px" class="form-style">
      <div class="form-group date">
        <el-form-item class="time-period" :label="时间区间" required>
          <el-date-picker type="date" :placeholder="开始时间" :picker-options="dateBegin" v-model="form.dateBegin" @change="beginDataChange"></el-date-picker>
          <span>-</span>
          <el-date-picker type="date" :placeholder="结束" :picker-options="dateEnd" v-model="form.dateEnd" @change="endDataChange"></el-date-picker>
          <span class="el-form-item__error">可以填一些错误信息</span>
        </el-form-item>
      </div>
    </el-form>
</template>

<script>
export default {
  data () {
     return {
        dateBegin: {},
        dateEnd: {},
        rules: {
        form: {
            dateBegin: '',
            dateEnd: ''
        }
    }
  },
    methods: {
//  起始时间改变的时候，将此之前的时间禁用
    beginDataChange (times) {
      if (times) {
        this.dateEnd = {
          disabledDate (time) {
            return time.getTime() < times.getTime()
          }
        }
      }
    },
//  终止时间改变的时候，将此之后的时间禁用
    endDataChange (times) {
      if (times) {
        this.dateBegin = {
          disabledDate (time) {
            return time.getTime() > times.getTime()
          }
        }
      }
    }
    }
  }
</script>