element-ui 时间选择器处理开始时间、结束时间不能大于当前日期或者结束时间不能大于开始时间

最新推荐文章于 2024-05-24 16:20:48 发布

翻车请V我

最新推荐文章于 2024-05-24 16:20:48 发布

阅读量3.5k

点赞数 3

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/weixin_55666792/article/details/121976404

版权

这篇博客分享了在使用Element-UI时间选择器时遇到的问题，即如何确保选择的开始时间不晚于结束时间，以及开始时间不早于当前日期。作者通过在`data`中定义`createTimeStart`和`createTimeEnd`来存储时间，并在`watch`中监听这两个属性的变化，当开始时间大于结束时间或开始时间超过当前日期时，会弹出错误提示并清空相应的时间输入。

摘要由CSDN通过智能技术生成

之前在使用element-ui时间选择器是遇到的问题需要自己手动处理一下选择的时间，代码如下

这是在data中声明的数据

params: {
        createTimeStart: "", //创建时间开始
        createTimeEnd: "", //创建时间结束
      },

在这里使用了监听的方式来处理这个问题

watch: {
    "params.createTimeStart":function(newVal, oldVal){
      let nowDate=new Date().getTime()
      let startDate=new Date(this.params.createTimeStart)
      let EndDate=new Date(this.params.createTimeEnd)
      if(this.params.createTimeEnd!=null&&this.params.createTimeStart!=null){
        if(startDate.getTime()>EndDate.getTime()){
          this.$message({message:"提交开始时间不能大于提交结束时间",type:"error",offset:400})
          this.params.createTimeEnd=""
        }
      }
      if(this.params.createTimeStart!=null&&startDate.getTime()>nowDate){
          this.$message({message:"提交开始时间不能大于当前日期",type:"error",offset:400})
          this.params.createTimeStart=""
      }
    },
    "params.createTimeEnd":function(newVal, oldVal){
      let nowDate=new Date().getTime()
      let startDate=new Date(this.params.createTimeStart)
      let EndDate=new Date(this.params.createTimeEnd)
      if(this.params.createTimeEnd!=null&&this.params.createTimeStart!=null){
        if(startDate.getTime()>EndDate.getTime()){
          this.$message({message:"提交开始时间不能大于提交结束时间",type:"error",offset:400})
          this.params.createTimeEnd=""
        }
      }
      if(this.params.createTimeEnd!=null&&EndDate.getTime()>nowDate){
          this.$message({message:"提交结束时间不能大于当前日期",type:"error",offset:400})
          this.params.createTimeEnd=""
      }
     },
    },