element-ui日期选择器disabledDate使用心得

有蝉

已于 2022-03-17 16:59:51 修改

阅读量8.7k

点赞数 1

分类专栏： vue+element-ui 文章标签： element-ui日期选择器disabledDate使用心

于 2019-06-27 16:01:20 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/93884118

版权

vue+element-ui 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

时期选择范围为当前时间以及当前时间之前

<template>
  <!-- 新增/修改进度计划 -->
  <div class="addPlan" id="subAdd">
    <el-form :model="dataModel" :rules="rules" ref="addPlan" label-width="135px">
      <el-form-item label="报表日期范围：" prop="creatTimeArr">
        <el-date-picker
          size="small"
          clearable
          :picker-options="pickerOptions1"
          v-model="dataModel.creatTimeArr"
          type="daterange"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>


    </div>
  </div>
</template>

<script>

export default {
  name: "addPlan",
  data() {
    var valiDate = (rule, value, callback) => {
        if(value.length>0){
          var endD = new Date(value[1]).getTime()
          var timel = new Date(value[0]).getTime()+3600 * 1000 * 24 * 6;
        }
        if (value.length==0) {
            callback(new Error('请选择日期'));
        } else if (endD>timel) {
            callback(new Error('时期范围应在七天内'));
        } else {
            callback();
        }
    };
    return {

      pickerOptions1:{},

      //数据校验
      rules: {
        creatTimeArr: [
          { required: true, validator:valiDate, trigger: "blur" }
        ]
      },
  
    };
  },
  
  methods: {
   
  },
  created(){
    var me = this
    this.$nextTick(() => {
      this.pickerOptions1 = {
        disabledDate(time) {
          return time.getTime() > new Date().getTime()
        }
      };
    })
  }
};
</script>

计划开始时间的结束值和计划结束时间的开始值的比较，如下图

<template>
  <!-- 分部分项库 -->
  <div class="imageProgressOverview">
    <!-- 搜索框 -->
    <div class="seach-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- 计划开始时间 -->
          <div class="form-container">
            <div class="form-box">
              <div class="form-box-label">
                <span>计划开始时间</span>
              </div>
              <div class="form-box-item">
                <el-date-picker
                  size="small"
                  clearable
                  v-model="searchParam.startTimeArr"
                  :picker-options="pickerOptions1"
                  type="daterange"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <!-- 计划结束时间 -->
          <div class="form-container">
            <div class="form-box">
              <div class="form-box-label">
                <span>计划结束时间</span>
              </div>
              <div class="form-box-item">
                <el-date-picker
                  size="small"
                  clearable
                  v-model="searchParam.endTimeArr"
                  :picker-options="pickerOptions2"
                  type="daterange"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </div>
          </div>
        </el-col>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "planProject",
  data() {
    return {
      searchParam: {
        startTimeArr: [],
        endTimeArr: [],
        state: "",
        respUser: "",
      },    
    };
  },

  methods: {
   
  },
  created() {
    var me = this;
 
    this.$nextTick(() => {
      this.pickerOptions1 = {
        disabledDate(time) {
          if (
            me.searchParam.endTimeArr &&
            me.searchParam.endTimeArr.length > 0
          ) {
            let stime1 = me.searchParam.endTimeArr[0];
            return time.getTime() > new Date(stime1).getTime();
          }
        }
      };
      this.pickerOptions2 = {
        disabledDate(time) {
          if (
            me.searchParam.startTimeArr &&
            me.searchParam.startTimeArr.length > 0
          ) {
            let stime1 = me.searchParam.startTimeArr[1];
            return time.getTime() < new Date(stime1).getTime();
          }
        }
      };
    });
  
  }
};
</script>
<style lang="scss">
@import "imageProgressOverview.scss";
</style>