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

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

 1 <!DOCTYPE html>

 2 <html>

 3

 4 <head>

 5     <meta charset="utf-8" />

 6     <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title>

 7     <!-- import Vue.js -->

 8     <script src="https://vuejs.org/js/vue.min.js"></script>

 9     <!-- import stylesheet -->

10     <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">

11     <!-- import iView -->

12     <script src="https://unpkg.com/iview/dist/iview.min.js"></script>

13 </head>

14

15 <body>

16     <div id="app">

17         <template>

18             <Row>

19                 <Col span="12"> 开始时间:

20                 <date-picker type="datetime" v-model="startTime" placeholder="请选择开始时间" :options="startTimeOption" @on-change="onStartTimeChange"></date-picker>

21                 </Col>

22                 <Col span="12"> 结束时间:

23                 <date-picker type="datetime" v-model="endTime" placeholder="请选择结束时间" :options="endTimeOption" @on-change="onEndTimeChange"></date-picker>

24                 </Col>

25             </Row>

26         </template>

27     </div>

28

29     <script>

30         new Vue({

31             el: '#app',

32             data() {

33                 return {

34                     startTime: '',

35                     endTime: '',

36                     startTimeOption: {},

37                     endTimeOption: {}

38                 }

39             },

40             mounted() {

41                 this.startTime = '2018-08-08 00:00:00'

42                 this.endTime = '2018-08-11 23:59:59'

43                 this.onStartTimeChange(this.startTime)

44                 this.onEndTimeChange(this.endTime)

45             },

46             methods: {

47                 /**

48                  * 开始时间发生变化时触发,设置结束时间不可选择的日期

49                  * 结束时间应大于等于开始时间,且小于等于当前时间

50                  * @param {string} startTime 格式化后的日期

51                  * @param {string} type 当前的日期类型

52                  */

53                 onStartTimeChange(startTime, type) {

54                     this.endTimeOption = {

55                         disabledDate(endTime) {

56                             return endTime < new Date(startTime) || endTime > Date.now()

57                         }

58                     }

59                 },

60                 /**

61                  * 结束时间发生变化时触发,设置开始时间不可选择的日期

62                  * 开始时间小于等于结束时间,且小于等于当前时间

63                  * @param {string} date 格式化后的日期

64                  * @param {string} type 当前的日期类型

65                  */

66                 onEndTimeChange(endTime, type) {

67                     this.startTimeOption = {

68                         disabledDate(startTime) {

69                             return startTime > new Date(endTime) || startTime > Date.now()

70                         }

71                     }

72                 }

73             }

74         })

75     </script>

76 </body>

77

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. GIS数据下载合集：遥感、土壤、气象、行政区数据...

      本文介绍GIS领域相关的各类综合数据免费获取网站,包括遥感数据.气象数据.土地数据.土壤数据.农业数据.行政区数据.社会数据.经济数据等等.   数据较多,大家可以直接通过下方目录加以总览:点击数 ...

  2. py之赋值，选择判断

    赋值机制 赋值之后:变量的地址就会指向同一个地址 a=123123 b=a id(a) id(b) 字符串是不论有多长内容一样地址一样 a='sadasd' b='sadasd' id(a) id(b ...

  3. 标准&有效的项目开发流程

    代码版本管理 在项目中,代码的版本管理非常重要.每个需求版本的代码开发在版本控制里都应该经过以下几个步骤. 在master分支中拉取该需求版本的两个分支,一个feature分支,一个release分支 ...

  4. Typora软件下载与markdown语法的使用

    Typora软件下载与markdown语法的使用 一.Typora下载 1.Typora的简介 Typora是一款轻量级文本编辑器,文本阅读器,是目前最火爆的文本编辑器. Typora中格式,字体,主 ...

  5. Python 内置界面开发框架 Tkinter入门篇 丙(文末有福利彩蛋，今天可是元宵节)

    以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/B1hH5Qzd2RkAiiUId1tLWw 本文大概 2874 个字 ...

  6. 使用Ajax跨域实现百度搜索功能

    上图 实现过程 1. 在百度上随便搜索一个内容 2. 在Network中找到一个地址右击 copy 然后 Copy link address 3. 将地址保存起来,取出中间有用的部分作为url属性的值 ...

  7. Kubernetes(k8s)控制器(三)：ReplicationController

    目录 一.系统环境 二.前言 三.ReplicationController概览 四.ReplicationController工作机制 五.创建ReplicationController 六.扩展r ...

  8. Selenium中免登录的实现方法一option

    Selenium中免登录的实现方法一option 在selenium中有很多种可以实现网站的免登录,option就是其中的一种做法. 学员在VIP自动化课程中多有涉及. 1. 准备工作 打开一个网站( ...

  9. C++并发-互斥元

    1.std::mutex类 1.构造函数,std::mutex不允许拷贝构造,也不允许 move 拷贝,最初产生的 mutex 对象是处于 unlocked 状态的. 2.lock(),调用线程将锁住 ...

  10. 学习Java Day20

    类的导入的第一种方式就是使用完全限定名,就是包名后面跟着类名 java.time.LocalDate totay=java.time.LocalDate.now(); 另一种可以直接用import j ...