Vue自定义验证之日期时间选择器

自定义验证 今日需求期望效果干货value-format 效果推荐

今日需求

查询条件中 当开始时间 和 结束时间 一致时 提示结束时间大于开始时间

期望效果

在这里插入图片描述

干货

    <el-form :inline="true" :rules="rules">
          <el-form-item label="创建时间" prop="createTime" class="create-time-item">
            <el-date-picker
              v-model="createTime"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
    </el-form>    
	  
	  export default {
	    data () {
	    // 自定义验证规则 
	      var createTimeCheck = (rule, value, callback) => {
	        if (value === '') {
	          callback()    // 回调函数
	        } else {
	          let createTimeStart = this.createTime ? this.createTime[0] : ''    // 从数组中取出开始时间   取出结果:'2020-10-28 16:01:15'
	          let createTimeEnd = this.createTime ? this.createTime[1] : ''      // 取出结束时间
	          let sTime = (((createTimeStart.split(' '))[1]).split(':')).join('')    // 从 '2020-10-28 16:01:15' 取出时间 结果:‘160115'
	          let sDate = (((createTimeStart.split(' '))[0]).split('-')).join('')    // 取出开始日期 结果:‘20201028'
	          let endTime = (((createTimeEnd.split(' '))[1]).split(':')).join('')    // 取出结束时间
	          let endDate = (((createTimeEnd.split(' '))[0]).split('-')).join('')    // 取出结束日期
	          if (parseInt(endDate) > parseInt(sDate)) {    // 如果结束日期大于开始日期  不用判断时间
	            callback()
	          } else {
	            if (parseInt(endTime) <= parseInt(sTime)) {    // 如果结束日期不大于开始日期  判断结束时间是否大于开始时间
	              callback(new Error('结束日期必须大于开始日期'))
	            } else {
	              callback()
	            }
	          }
	        }
	      }
	      
	      return {
		    createTime: '',     // 表单 时间 双向绑定值
		    rules: {            // 调用createTimeCheck 验证
               createTime: [
                  { validator: createTimeCheck, trigger: 'blur' }
               ]
             }
		  }
	   }

value-format

在这里插入图片描述

效果

注意看 当结束日期比开始日期小时 开始日期自动 与 结束日期同步, 所以结束日期永远大于等于开始日期

在这里插入图片描述

vue项目时间选择器

vue项目时间选择器 设置结束时间不能早于开始时间,开始时间不能晚于结束时间html里面:js里面

设置结束时间不能早于开始时间,开始时间不能晚于结束时间

html里面

<el-form-item label="发布时间:">
        <div class="form_item form_content">
          <div>
            <el-date-picker style="width:180px;" v-model="timerStart" :picker-options="pickerOptionsStart" type="date" placeholder="开始日期"></el-date-picker>
          </div>
          <div style="margin:0 15px;">-</div>
          <div>
            <el-date-picker style="width:180px;" v-model="timerEnd" :picker-options="pickerOptionsEnd" type="date" placeholder="结束日期"></el-date-picker>
          </div>
        </div>
</el-form-item>

js里面

<script>
	export default {
	  data() {
	    return {
	      timerStart: "", //开始日期选择
	      timerEnd: "", //结束日期选择
	      // 设置结束时间不能早于开始时间
	      pickerOptionsStart: {
	        disabledDate: time => {
	          const endDateVal = new Date(this.timerEnd).getTime();
	          if (endDateVal) {
	            return time.getTime() > endDateVal   1;
	          }
	        }
	      },
	      pickerOptionsEnd: {
	        disabledDate: time => {
	          const beginDateVal = new Date(this.timerStart).getTime();
	          if (beginDateVal) {
	            return time.getTime() < beginDateVal   1;
	          }
	        }
	       }
	     };
	  }
	}
 }, 
</script>

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

Vue自定义验证之日期时间选择器详解的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  3. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧

  5. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. 微信小程序多项选择器checkbox

    这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  9. vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. vue+elemet实现表格手动合并行列

    这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部