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

这篇文章主要介绍了Vue怎么自定义验证日期时间选择器的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue怎么自定义验证日期时间选择器文章都会有所收获，下面我们一起来看看吧。

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

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

今日需求

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

期望效果

干货

                                                                            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里面

        
          
                      
          
-
          
                      
        

js里面

关于"Vue怎么自定义验证日期时间选择器"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"Vue怎么自定义验证日期时间选择器"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。