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. LC 973. K Closest Points to Origin

    We have a list of points on the plane.  Find the K closest points to the origin (0, 0). (Here, the d ...

  2. flutter webview_flutter 设置cookies

    WebViewController _controller; onWebViewCreated: (WebViewController wvc) { _controller = wvc; } onPa ...

  3. PyQt5中QTableWidget设置列宽大小的几种方式

    我们在使用QTableWidget的时候,经常会出现列宽大小和我们想象不一致的情况,如下图: 内容不能完全显示,需要手动调整列宽才能显示完全. 还有如下图: 因此需要我们擅于调整列宽为我们所使用,现将 ...

  4. rsync+inotify实时数据同步

    没有实际的用过,先mark一下,后面实践. https://www.osyunwei.com/archives/7447.html 一.为什么要用Rsync+sersync架构? 1.sersync是 ...

  5. NFS PersistentVolume

    一.部署nfs服务端: k8s-master 节点上搭建了 NFS 服务器 (1)安装nfs服务: yum install -y nfs-utils rpcbind vim /etc/exports ...

  6. Array.prototype.filter()

    1. filter() 方法:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素 ——filter() 不会对空数组进行检测 ——filter() 不会改变原始数组 2. 语法: ...

  7. maven-1-是什么

    背景 1.1. 场景 假如你正在Eclipse下开发两个Java项目,姑且把它们称为A.B,其中A项目中的一些功能依赖于B项目中的某些类,那么如何维系这种依赖关系的呢? 很简单,这不就是跟我们之前写程 ...

  8. JAVA_day1_变量和常量

    JAVA变量和常量 一.JAVA中的关键字 注:关键字区分大小写,Try不是关键字而try则是. 二.JAVA标识符 1.标识符:标识符就是用于给 Java 程序中变量.类.方法等命名的符号. 2.标 ...

  9. 3.React中的setstate的几个现象

    转载segfault 上面的一篇文章,https://segmentfault.com/a/1190000014498196 1.在同一个方法中多次setState是会被合并的,并且对相同属性的设置只 ...

  10. flex 遇上white-space:nowrap的2种解决方法

    需求:使用flex布局,超出部分想使用点点点显示 一.方法1使用min-width:0 效果: HTML代码如下: <div class="team-body"> &l ...