废话不多说直接上代码，拷贝代码保存为 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. Apache RocketMQ 5.0 笔记

    RocketMQ 5.0:云原生"消息.事件.流"实时数据处理平台,覆盖云边端一体化数据处理场景. 核心特性 云原生:生与云,长与云,无限弹性扩缩,K8s友好 高吞吐:万亿级吞吐保 ...

  2. 图文并茂手把手教你How to copy files or directory in nodejs npm scripts编写脚本用npm或者node命令复制文件

    每天都要开心哦~~~ 今天来个双语文档 先放出来官方文档 https://www.npmjs.com/package/copyfiles 先来说一下npm 执行的方式 1.首先,进入项目目录,下载依赖 ...

  3. Spring AOP与AspectJ的对比及应用

    1 简介 AOP,即面向切面编程是很常用的技术,特别是在Java Web开发中.而最流行的AOP框架分别是Spring AOP和AspectJ. 2 Spring AOP vs AspectJ Spr ...

  4. 用Java写一个分布式缓存——RESP服务端

    前言 本篇我们将完成一个RESP的socket的服务端,初步完成一个单机版缓存. 另外在其中我们还需要完成命令的动态路由 源码:https://github.com/weloe/Java-Distri ...

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

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

  6. 【转载】JAVA - 解决：Java.lang.NoClassDefFoundError: javax/xml/bind/JAXBException

    抄:https://www.cnblogs.com/sunylat/p/13339507.html 问题原因: 高版本的JDK中不包含javax.xml.bind包了! 解决方法: 1,如果是mave ...

  7. 解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题

    问题复现: 正常状态下: 切换到其他页面再切换回来: 问题解决: 其实这个问题的解决方式官网写得清清楚楚,我们看看官网怎么解决的: 接下来我用代码解释下这句话(正确的做法是,在图表容器被销毁之后,调用 ...

  8. 使用 DirectSound 播放 WAV 文件

    使用 DirectSound 播放 WAV 文件 本文需要的前置知识可以在之前的这两篇文章找到. WAVE音频文件格式及其64位扩展格式的简要介绍 读写wav格式文件 基于本文介绍的方法,我们也可以用 ...

  9. windows C++

    #include <Windows.h> LRESULT CALLBACK WndProc(HWND hWnd, UINT uMsg, WPARAM wParam, LPARAM lPar ...

  10. 安卓逆向4.xpsoed hook构造方法

    大纲 获取所有类 获取所有字段 或者所有方法 1.获取所有类 并打印 2.遍历所有字段 3.遍历所有方法 集合 由于回家了,懒得敲代码,所以就这样了