废话不多说直接上代码，拷贝代码保存为 html 文件，用浏览器打开就可以看到效果。

在线查看效果：https://run.iviewui.com/PmGsUW3P

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3
  4.  4 <head>
  5.  5     <meta charset="utf-8" />
  6.  6     <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title>
  7.  7     <!-- import Vue.js -->
  8.  8     <script src="https://vuejs.org/js/vue.min.js"></script>
  9.  9     <!-- import stylesheet -->
  10. 10     <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
  11. 11     <!-- import iView -->
  12. 12     <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
  13. 13 </head>
  14. 14
  15. 15 <body>
  16. 16     <div id="app">
  17. 17         <template>
  18. 18             <Row>
  19. 19                 <Col span="12"> 开始时间:
  20. 20                 <date-picker type="datetime" v-model="startTime" placeholder="请选择开始时间" :options="startTimeOption" @on-change="onStartTimeChange"></date-picker>
  21. 21                 </Col>
  22. 22                 <Col span="12"> 结束时间:
  23. 23                 <date-picker type="datetime" v-model="endTime" placeholder="请选择结束时间" :options="endTimeOption" @on-change="onEndTimeChange"></date-picker>
  24. 24                 </Col>
  25. 25             </Row>
  26. 26         </template>
  27. 27     </div>
  28. 28
  29. 29     <script>
  30. 30         new Vue({
  31. 31             el: '#app',
  32. 32             data() {
  33. 33                 return {
  34. 34                     startTime: '',
  35. 35                     endTime: '',
  36. 36                     startTimeOption: {},
  37. 37                     endTimeOption: {}
  38. 38                 }
  39. 39             },
  40. 40             mounted() {
  41. 41                 this.startTime = '2018-08-08 00:00:00'
  42. 42                 this.endTime = '2018-08-11 23:59:59'
  43. 43                 this.onStartTimeChange(this.startTime)
  44. 44                 this.onEndTimeChange(this.endTime)
  45. 45             },
  46. 46             methods: {
  47. 47                 /**
  48. 48                  * 开始时间发生变化时触发,设置结束时间不可选择的日期
  49. 49                  * 结束时间应大于等于开始时间,且小于等于当前时间
  50. 50                  * @param {string} startTime 格式化后的日期
  51. 51                  * @param {string} type 当前的日期类型
  52. 52                  */
  53. 53                 onStartTimeChange(startTime, type) {
  54. 54                     this.endTimeOption = {
  55. 55                         disabledDate(endTime) {
  56. 56                             return endTime < new Date(startTime) || endTime > Date.now()
  57. 57                         }
  58. 58                     }
  59. 59                 },
  60. 60                 /**
  61. 61                  * 结束时间发生变化时触发,设置开始时间不可选择的日期
  62. 62                  * 开始时间小于等于结束时间,且小于等于当前时间
  63. 63                  * @param {string} date 格式化后的日期
  64. 64                  * @param {string} type 当前的日期类型
  65. 65                  */
  66. 66                 onEndTimeChange(endTime, type) {
  67. 67                     this.startTimeOption = {
  68. 68                         disabledDate(startTime) {
  69. 69                             return startTime > new Date(endTime) || startTime > Date.now()
  70. 70                         }
  71. 71                     }
  72. 72                 }
  73. 73             }
  74. 74         })
  75. 75     </script>
  76. 76 </body>
  77. 77
  78. 78 </html>

Vue.js中使用iView日期选择器并设置开始时间结束时间校验的更多相关文章

  1. JS时间戳比较大小：对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内

    /* *JS时间戳比较大小:对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内 *@param date1 date2(形如:'2015-01-01'类 ...

  2. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  3. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  4. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  5. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  6. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  7. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  8. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

  9. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  10. angular.js和vue.js中实现函数去抖（debounce）

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

随机推荐

  1. [阿里云]Datahub测试使用记录

    由于需要测试阿里云Datahub功能,因此测了一下Datahub的一些功能 DATAHUB: 简介: 阿里云的流式数据(streaming)处理平台 对流式数据的发布(publish)订阅(subsc ...

  2. 高性能 Java 框架。Solon v1.12.3 发布（春节前兮的最后更）

    一个更现代感的 Java "生态型"应用开发框架:更快.更小.更自由.不是 Spring,没有 Servlet,也无关 JavaEE:新兴独立的轻量生态 (已有150来个生态插件) ...

  3. Node.js 应用全链路追踪技术——全链路信息存储

    作者:vivo 互联网前端团队- Yang Kun 本文是上篇文章<Node.js 应用全链路追踪技术--全链路信息获取>的后续.阅读完,再来看本文,效果会更佳哦. 本文主要介绍在Node ...

  4. .Net 和 .Net Core 集成Swagger 以及配合JWT身份验证

    Swagger介绍 简单来说swagger是一款WebAPI的接口管理帮助文档,并且可以直接进行接口测试 我们来看一下官网介绍 https://swagger.io Swagger is a powe ...

  5. 利用ICSharpCode.SharpZipLib.dll解析 出错：“Wrong Local header signature: 0xFF8”

    分析原因 利用ICSharpCode.SharpZipLib.dll解析APK时,进入APK的AndroidXml获取时出现报错 出错代码 using (ICSharpCode.SharpZipLib ...

  6. 视觉十四讲：第七讲_3D-3D：ICP估计姿态

    1.ICP 假设有一组配对好的3D点, \(P={P_{1}, ..., P_{N}}\) , \(P^{'}={P_{1}^{'}, ..., P_{N}^{'}}\). 有一个欧式变换R,t,使得 ...

  7. 剑指 Offer 34. 二叉树中和为某一值的路径（java解题）

    目录 1. 题目 2. 解题思路 3. 数据类型功能函数总结 4. java代码 1. 题目 给你二叉树的根节点 root 和一个整数目标和 targetSum ,找出所有 从根节点到叶子节点 路径总 ...

  8. ClickHouse exception, code: 62, host: hadoop102, port: 8123; Code: 62, e.displayText() = DB::Exception: Syntax error: failed at position 183 (end of query):

    报错 ClickHouse exception, code: 62, host: hadoop102, port: 8123; Code: 62, e.displayText() = DB::Exce ...

  9. 有趣的python库-MyQR

    MyQR-个性二维码 基本使用 from MyQR import myqr import os myqr.run( words="hu qing nian ni zhen bang, you ...

  10. CSU2022-2023C语言期中考试机试

    卡在出线概率了.40%,没想到遍历时反了,我去. 1.时钟加法 题目描述 小南最近迷上了各种形式的加法,例如时钟加法,时钟加法是指给定一个当前时间,其形式为h:m:s,计算加上n秒后新的时间.你能帮他 ...