Vue.js中使用iView日期选择器并设置开始时间结束时间校验
废话不多说直接上代码，拷贝代码保存为 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日期选择器并设置开始时间结束时间校验的更多相关文章
- JS时间戳比较大小：对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内
/* *JS时间戳比较大小:对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内 *@param date1 date2(形如:'2015-01-01'类 ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- Vue.js中css的作用域
Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- angular.js和vue.js中实现函数去抖（debounce）
问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...
随机推荐
- 从log4j切换到logback后项目无法启动
1.背景 有个旧项目之前使用的是log4j2来打印日志的,因为某些原因,同事想换成logback. 换成logback改动也很简单,大致就一下2步: 删除log4j2.xml配置,新增logback. ...
- linux环境编程(2): 使用pipe完成进程间通信
1. 写在前面 linux系统内核为上层应用程序提供了多种进程间通信(IPC)的手段,适用于不同的场景,有些解决进程间数据传递的问题,另一些则解决进程间的同步问题.对于同样一种IPC机制,又有不同的A ...
- mysql 列约束
mysql可以对插入的数据进行特定得验证,只有满足条件才可以插入到数据表中,否则认为是非法插入: 例如:人性别只可以是男.女.年龄只能是0-100. ①主键约束查重-PRIMARY KEY,1表一个: ...
- 当LOGO设计与世界文化擦出火花——JJQ的LOGO设计之路
<当LOGO设计与世界文化碰撞出火花--论 JJQ 的LOGO是如何制成的> (友链:https://tg.hszxoj.com/user/475) 首先我们对jjq对应的汉字进行拉长 ...
- avalonia自定义弹窗
对于使用avalonia的时候某些功能需要到一些提示,比如异常或者成功都需要对用户进行提示,所以需要单独实现弹窗功能,并且可以自定义内部组件,这一期将手动实现一个简单的小弹窗,并且很容易自定义 创建项 ...
- springboot使用EasyExcel,导出数据到Excel表格,并且将Excel表中数据导入
一.导出至Excel 1.导入依赖 导出方法需要使用到fastJson的依赖,这里也直接导入 点击查看代码 <!--阿里的easyexcel--> <dependency> & ...
- 【一句话】:first-child 伪类解释
关键词 不起作用 选不到 失败 解释 input:first-child 要求既是input元素,而且是兄弟节点中的第一个 如果要找第一个input元素,那么用input:first-of-type ...
- FAS2720 配置
FAS 2720配置操作 第1章 初始化 1.1设备物理安装 1.1.1组件介绍 机头FAS 2720 (2U) 前面板 后面 1.1.2准备工作 (1)工具准备 螺丝刀.网线.Console线. ...
- STL中的智能指针(Smart Pointer)及其源码剖析： std::unique_ptr
STL中的智能指针(Smart Pointer)及其源码剖析: std::unique_ptr 和 std::auto_ptr一样,std::unique_ptr也是一种智能指针,它也是通过指针的方式 ...
- [AI-ML]机器学习是什么？一起了解！（一）
机器学习 简单的说,机器学习是一种让计算机系统从数据中学习并自动改进的算法.通俗地说,机器学习就是让计算机从数据中"学习",并使用这些学习成果来做出决策或预测. 学术解释中,机器学 ...