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;
    },



  • 相关阅读:
    [公告]Google个性化主页可以正常阅读博客园的RSS了
    致歉
    [公告]网站程序已经升级到ASP.NET 2.0
    GTF: Great Teacher Friedman
    Node.js : exports と module.exports の違い
    拨开历史的迷雾从篡夺者战争到五王之战的政经原因
    javascript模板系统 ejs v10
    window.name + postMessage实现不用代理页的跨域通信
    node.js Domain 時代のエラー処理のコーディングパターン
    鲜为人知的get,set操作符
  • 原文地址:https://www.cnblogs.com/florazeng/p/14046500.html
Copyright © 2011-2022 走看看