element-ui 表单自定义日期输入校验
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 表单自定义日期输入校验的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- (vue.js)element ui 表单重置
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...
- vue踩坑:vue+ element ui 表单验证有值但验证失败。
一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...
- Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)
自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...
- Element Form表单实践(上)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- Vue Element Form表单时间验证控件使用
如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...
- UI表单
Monk.UI表单美化插件诞生记! 阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 ...
- HTML 表单元素、 输入类型、Input 属性
<input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...
随机推荐
- 一百零九:CMS系统之前端根据不同权限渲染不同菜单
给用户绑定为开发者 个人信息中渲染角色和权限 {% extends 'cms/cms_base.html' %} {% block title %} 个人信息{% endblock %} {% blo ...
- RxJS 6有哪些新变化?
我们的前端工程由Angular4升级到Angular6,rxjs也要升级到rxjs6. rxjs6的语法做了很大的改动,幸亏引入了rxjs-compact包,否则升级工作会无法按时完成. 按照官方的 ...
- c++后台开发面试常见知识点总结(二)网络编程
(1)TCP和UDP有什么区别? TCP是传输控制协议,提供的是面向连接的,可靠地字节流服务.使用三次握手建立连接,四次挥手释放连接.UDP是用户数据报协议,传输的是UDP数据报,是无连接的,而且没有 ...
- React Native pod install报错 `Yoga (= 0.44.3.React)` required by `React/Core (0.44.3)`
使用pod安装,可能会因为Podfile的路径指向错误或者没有路径指向因为报错. 报错截图如下: 这是因为在指定的路径没有寻找到相应的组件.此时就需要修改podfile文件中的路径,由于上方提示没有 ...
- SQL Server 中 ROWLOCK 行级锁
一.ROWLOCK的使用 1.ROWLOCK行级锁确保,在用户取得被更新的行,到该行进行更新,这段时间内不被其它用户所修改.因而行级锁即可保证数据的一致性,又能提高数据操作的并发性. 2.ROWLOC ...
- H5 拖拽操作
H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...
- 利用canvas对图片进行切割
使用input标签选择一张图片, 然后利用canvas对图片进行切割, 可以设置切割的行数和列数 这是html代码 ... <input type="file" id=&qu ...
- 随便写的Gost安装脚本,作用你懂的,目前只支持CentOS,可以在Aliyun ECS中使用
服务器 执行下面命令: curl -L aux.pub/gost | bash 或者: curl -L https://gist.githubusercontent.com/inrg/03da1ded ...
- web安全问题总结
主要问题 SQL注入:即通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,从而获取不该获取的数据 跨站脚本攻击(也称为XSS):指利用网站漏 ...
- mapreducer计算原理
mapreducer计算原理