zoukankan      html  css  js  c++  java
  • elementUI 选择开始结束日期加限制

    需求是开始结束日期不得大于当前时间,当开始日期发生变化时,结束日期不得小于开始日期且不得大于当前日期

    <el-form-item label="开始日期:">
      <el-date-picker
        size="mini"
        v-model="form.startDate"
        value-format="yyyyMMdd"
        type="date"
        placeholder="选择开始日期"
        :picker-options="pickerBeginDateBefore"
        @change="changeTime"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="结束日期:">
      <el-date-picker
        size="mini"
        v-model="form.endDate"
        value-format="yyyyMMdd"
        type="date"
        placeholder="选择结束日期"
        :picker-options="pickerBeginDateAfter"
      ></el-date-picker>
    </el-form-item>
    data数据展示如下:
    // 开始时间disabled
    pickerBeginDateBefore: {
        disabledDate: time = > {
            return time.getTime() > Date.now();
        }
    },
    // 结束时间disabled
    pickerBeginDateAfter: {
        disabledDate: time = > {
            return time.getTime() > Date.now();
        }
    },
    
    方法:
    
    changeTime() {
        let self = this;
        self.form.endDate = '';
        self.pickerBeginDateAfter = {
            disabledDate(time) {
                let timeyear = time.getFullYear();
                let timemonth = time.getMonth() + 1;
                if (timemonth >= 1 && timemonth <= 9) {
                    timemonth = '0' + timemonth;
                }
                let timeday = time.getDate();
                if (timeday >= 1 && timeday <= 9) {
                    timeday = '0' + timeday;
                }
                let currentTime = timeyear.toString() + timemonth.toString() + timeday.toString();
                if (currentTime < self.form.startDate || currentTime > self.currentDate) {
                    return true;
                }
            }
        };
    },
    getCurrentTimeStr() {
        var currentDate = new Date();
        var currentTimeStrBefore = null;
        var currentTimeStr = null;
        var year = currentDate.getFullYear().toString();
        var month = (currentDate.getMonth() + 1).toString();
        var date = currentDate.getDate().toString();
        var dateBefore = (currentDate.getDate() - 1).toString();
        currentTimeStrBefore = year + month + dateBefore;
        currentTimeStr = year + month + date;
        this.currentDate = currentTimeStr;
        this.form.startDate = currentTimeStrBefore;
        this.form.endDate = currentTimeStr;
    },



  • 相关阅读:
    总结一下最近的工作状和提高效率的方式
    使用hash 算法把数据均匀的放在不同的数据库里面
    微服务-网关-全局过滤器鉴权(未使用spring security)
    Jwt 工具类
    Java泛型(二)<T> 和<?> 的区别
    final 和 static 的区别
    一面bytedance
    catalina.out 显示 端口占用
    No plugin found for prefix 'install' in the current project and in the plugin groups
    Mysql-sql查询技巧分析
  • 原文地址:https://www.cnblogs.com/florazeng/p/14046500.html
Copyright © 2011-2022 走看看