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. ansible简单入门

    1,结构框架 Ansible 使用的是无代理体系结构,这种体系结构可以通过防止节点轮询控制机器来减少网络开销.Ansible 提供的结果框架如下所示: Ansible :运行在中央计算机上: Conn ...

  2. 为什么单个TCP连接很难占满带宽

    计算 TCP吞吐量的公式 TCP窗口大小(bits) / 延迟(秒) = 每秒吞吐量(bits) 比如说windows系统一般的窗口大小为64K, 中国到美国的网络延迟为150ms. 64KB = 6 ...

  3. Windows安装多个版本JDK如何切换

    本人电脑同时安装了jdk1.7和1.8,以下时切换jdk版本的方式: 1.修改环境变量: 2.修改注册表: 打开HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft 分别修改Jav ...

  4. 牛客练习赛53 A-E

    牛客联系赛53 A-E 题目链接:Link A 超越学姐爱字符串 题意: 长度为N的字符串,只能有C,Y字符,且字符串中不能连续出现 C. 思路: 其实就是DP,\(Dp[i][c]\) 表示长度为 ...

  5. Web比赛4

    广外2019-11-30 @广外-枯燥的抽奖 <?php #这不是抽奖程序的源代码!不许看! header("Content-Type: text/html;charset=utf-8 ...

  6. 解析Health端点数据获取异常数据

    问题: 由于健康节点响应类型是Health类,并且由于需要执行的健康状态类不固定,返回的类型数据的字段不是固定的,所以使用了@JsonAngGetter 注解,照成了解析这个JSON 结构非常不方便. ...

  7. Java学习笔记-IO

    IO(Input Output)流,用来处理设备之间的数据传输 IO IO概述 Java对数据的操作是通过流的方式 Java用于操作流的对象都在IO包中 流按操作数据分为两种:字节流与字符流 流按流向 ...

  8. 高并发网络编程之epoll详解(转载)

    高并发网络编程之epoll详解(转载) 转载自:https://blog.csdn.net/shenya1314/article/details/73691088 在linux 没有实现epoll事件 ...

  9. (5.15)mysql高可用系列——MHA实践

    关键词:MHA,mysql mha [1]需求 采用mysql技术,实现MHA高可用主从环境,预计未来数据量几百G MHA概念参考:MYSQL高可用技术概述 [2]环境技术架构 [2.1]MHA简介 ...

  10. Oracle-DQL 4- 多表查询

    多表查询: 1.笛卡尔积SELECT * FROM dept;--查询员工的信息和其所在部门的信息SELECT ename,job,dname,locFROM emp,dept; --集合A中的所有元 ...