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. [go]gorhill/cronexpr用go实现crontab

    // crontab基础 // linux crontab // 秒粒度, 年配置(2018-2099) // 哪一分钟(0-59),哪小时(0-23),哪天(1-31),哪月(1-12),星期几(0 ...

  2. Selenium 2自动化测试实战39(Page Object设计模式)

    Page Object设计模式 Page object是selenium自动化测试项目开发时间的最佳设计模式之一,主要体现在对界面交互细节的封装. 1.认识page object优点如下:1.减少代码 ...

  3. kettle在windows下面部署定时任务

    KETTLE有三大块: Spoon:转换/工作(transform/job)设计工具,主要是GUI方式. Kitchen:工作(job)执行器,是一个作业执行引擎,通过命令行的方式带参数执行,参数说明 ...

  4. [LeetCode 206] Reverse Linked List 翻转单链表

    本题要求将给定的单链表翻转,是校招面试手撕代码环节的高频题,能很好地考察对单链表这一最简单数据结构的理解:可以使用迭代和递归两种方法对一个给定的单链表进行翻转,具体实现如下: class Soluti ...

  5. 从Myeclipse到IntelliJ IDEA-——让你摆脱鼠标,全键盘操作

    注:本文是对原文章(https://blog.csdn.net/luoweifu/article/details/13985835)做的补充 快捷键对比 Myeclipse IDEA 说明 Ctrl+ ...

  6. Java 基础篇之注解

    注解 注解,其实是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通过使用注解,可以在不改变原有逻辑的情况下,在源文件中嵌入补充一些信息. Annotation 提供了一 ...

  7. 并发-synchronized

    线程并发-synchronized和Lock简单认知 前几天刚加深了线程的了解,期间在验证各种方法及多线程时遇到一些疑问,在高并发的情况下,怎么做才能保证程序还能按照我们预期的正常运行下去,这就是我们 ...

  8. SpringBoot项目在IDEA中以jar方式部署

    1.在pom.xml下添加如下插件 这个插件可以在项目打包成jar包后,通过java -jar运行 <build> <plugins> <plugin> <g ...

  9. [转帖]差之毫厘谬之千里!带你认识CPU后缀含义

    差之毫厘谬之千里!带你认识CPU后缀含义 https://diy.pconline.com.cn/718/7189243_all.html 2015-11-16 00:15 出处:PConline原创 ...

  10. yum方式安装mono

    https://blog.csdn.net/qq_21153619/article/details/81459359 这样应该比较简单 yum方式按照mono rpm --import "h ...