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

 更新时间:2021年08月31日 14:33:12   作者:waillyer  
这篇文章主要为大家详细介绍了使用Element+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 element-ui 绑定@keyup事件无效的解决方法

    vue element-ui 绑定@keyup事件无效的解决方法

    遇到vue element-ui 绑定@keyup事件无效的问题怎么解决?下面小编就为大家分享一篇vue element-ui 绑定@keyup事件无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    这篇文章主要介绍了基于VUE移动音乐WEBAPP跨域请求失败的解决方法,需要的朋友可以参考下
    2018-01-01
  • 基于vue实现pdf预览功能

    基于vue实现pdf预览功能

    随着互联网的发展,PDF 文件在信息交流和文档分享中起着重要的作用,通过在 Vue 组件中实现 PDF 预览功能,我们可以为用户提供便捷的内容阅读体验,下面我们就来看看具体实现方法吧
    2023-08-08
  • Vue中装饰器的使用示例详解

    Vue中装饰器的使用示例详解

    Vue Property Decorator提供了一些装饰器,包括@Prop、@Watch、@Emit、@Inject、@Provide、@Model等等,本文主要来和大家讲讲它们的使用方法,需要的可以参考一下
    2023-07-07
  • Vue实现轮播图组件的封装

    Vue实现轮播图组件的封装

    Vue轮播图组件的封装可通过封装组件、使用插件、配置化等方式实现,主要包括图片预加载、定时轮播、无限滚动、手势滑动、响应式布局等功能,实现方式可使用Vue的生命周期函数、自定义事件、计算属性等技术
    2023-04-04
  • 浅谈Vue中的this.$store.state.xx.xx

    浅谈Vue中的this.$store.state.xx.xx

    这篇文章主要介绍了Vue中的this.$store.state.xx.xx用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-09-09
  • vue中的v-if和v-show的区别详解

    vue中的v-if和v-show的区别详解

    这篇文章主要介绍了vue中的v-if和v-show的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 如何在vue项目中使用UEditor--plus

    如何在vue项目中使用UEditor--plus

    UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,这篇文章主要介绍了如何在vue项目中使用UEditor--plus ,需要的朋友可以参考下
    2022-08-08
  • windows下vue.js开发环境搭建教程

    windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue路由vue-router详细讲解指南

    Vue路由vue-router详细讲解指南

    这篇文章主要介绍了Vue路由vue-router详细讲解指南,对vue-router感兴趣的同学,可以参考下
    2021-04-04

最新评论