methods: {
  validateDate(rule, value, callback){
if (value) {
let timestamp = new Date(value).getTime()
let start = new Date(this.shiftStartTime).getTime()
let end = new Date(this.shiftEndTime).getTime()
if (end < timestamp || timestamp < start) {
callback(new Error(`请在值班时间内选择 ${this.shiftStartTime} 至 ${this.shiftEndTime}`))
} else {
callback()
}
} else {
callback()
}
}
}
<el-form-item
label="记录时间"
prop="recordDateTime"
:rules="[
{ required: true, message: '记录时间不能为空', trigger: 'blur'},
{ validator: validateDate, trigger: ['blur', 'change'] }
]"
>
<el-date-picker
v-model="summaryForm.recordDateTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
></el-date-picker>
</el-form-item>

element-ui 表单自定义日期输入校验的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  3. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  4. vue踩坑:vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  5. Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)

    自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...

  6. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  7. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

  8. UI表单

    Monk.UI表单美化插件诞生记!   阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 ...

  9. HTML 表单元素、 输入类型、Input 属性

    <input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...

随机推荐

  1. consul ocelot

    consul配置完成后 新建.netcoreapi项目, nuget安装ocelot 添加多个配置文件,.netcore中会自动合并为一个文件,global配置总的配置,其他为各个项目的配置 Serv ...

  2. Shell脚本中判断字符串是否被包含在内

    1.字段 grep:案例: str1="abcdefgh"str2="def"result=$(echo $str1 | grep "${str2}& ...

  3. 【Rxjs】 - 解析四种主题Subject

    原文地址: https://segmentfault.com/a/1190000012669794 引言 开发ngx(angular 2+)应用时,基本上到处都会用到rxjs来处理异步请求,事件调用等 ...

  4. 关于XMind软件文件格式的一些思考

    1,安装XMind软件,看见可以导入Markdown文件 2,因此新建了测试.md文件,代码格式为左图,显示效果为右图. 3,导入到XMind中显示为下图 4,也就是XMind中子标题对应着Markd ...

  5. Java内部类(3):局部内部类

    有这样一种内部类,它是嵌套在方法和作用域内的,对于这个类的使用主要是应用与解决比较复杂的问题,想创建一个类来辅助我们的解决方案,到那时又不希望这个类是公共可用的,所以就产生了局部内部类,局部内部类和成 ...

  6. 【JVM学习笔记】字节码文件结构

    https://www.cnblogs.com/heben/p/11468285.html  比这篇笔记更好一点 新建一个Java类 package com.learn.jvm; public cla ...

  7. vs把asp.net旧的项目名称全部修改

    1 先打开项目,把名称全部替换掉,然后把解决方案,程序集名称全部替换掉. 2 重新生成,清理,关闭项目. 3 把.sln文件用文本编辑器打开,替换里面的名称,然后把文件夹名称都修改好.d 4.打开项目 ...

  8. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  9. vue是一个渐进式的框架,我是这么理解的

    vue是一个渐进式的框架,我是这么理解的 原文地址 时间:2017-10-26 10:37来源:未知 作者:admin 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主 ...

  10. bug解决思路——插入数据时,前台不展示数据

    积攒一下平时解决bug时的思路,以后若是一头乱麻时翻出来看看~ 一个bug五一之前就和现场在定位,直到今天才算是定位到问题. 所有bug,还是得重现出来才可以发现问题.现场说登记记录时数据没在前台展示 ...