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



  • 相关阅读:
    React Native 实现MQTT 推送调研 (1)
    bpmn的依赖注入
    vdom diff
    浏览器渲染与event loop
    uni-app 通过后缀名区分不同渠道版本
    网页定宽 栅格布局
    网页顶部菜单导航和左侧菜单导航的区别?
    Android利用tcpdump和wireshark抓取网络数据包
    就算做了
    我眼中的Serverless
  • 原文地址:https://www.cnblogs.com/florazeng/p/14046500.html
Copyright © 2011-2022 走看看