欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

使用Element+vue实现开始与结束时间限制

时间:2022-03-04 11:23:51|栏目:vue|点击:

本文实例为大家分享了用Element+vue实现开始与结束时间限制的具体代码,供大家参考,具体内容如下

效果

<el-form-item label="开始时间">
   <el-date-picker v-model="startDate" type="datetime" placeholder="选择日期"
                   format="yyyy-MM-dd HH:mm:ss"
                   value-format="timestamp"
                   :editable="false"
                   :picker-options="pickerOptionsStart" @change="changeStart">
   </el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
   <el-date-picker v-model="endDate" type="datetime" placeholder="选择日期"
                   style="width: 100%;"
                   format="yyyy-MM-dd HH:mm:ss"
                   value-format="timestamp"
                   :clearable="true"
                   :editable="false"
                   :picker-options="pickerOptionsEnd" @change="changeEnd">
   </el-date-picker>

</el-form-item>
pickerOptionsStart: {},
pickerOptionsEnd: {},
startDate: '',
endDate: '',

 changeStart() { // 限制开始时间
        if (this.endDate != '') {
          if (this.endDate <= this.startDate) {
            this.$message.warning('结束时间必须大于开始时间!');
            this.startDate = '';
          }
        }
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.startDate) {
              return time.getTime() < this.startDate;
            }
          },
        });
      },

      changeEnd() { // 限制结束时间
        console.log(this.endDate);
        if (this.startDate != '') {
          if (this.endDate <= this.startDate) {
            this.$message.warning('结束时间必须大于开始时间!');
            this.endDate = '';
          }
        }

        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.endDate) {
              return time.getTime() > this.endDate;
            }
          },
        });
      },

上一篇:Vue中路由守卫的具体使用

栏    目:vue

下一篇:vue下axios拦截器token刷新机制的实例代码

本文标题:使用Element+vue实现开始与结束时间限制

本文地址:http://www.codeinn.net/misctech/195243.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有