Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能


Posted in Javascript onAugust 12, 2018

具体代码如下所述:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title>
 <!-- import Vue.js -->
 <script src="//vuejs.org/js/vue.min.js"></script>
 <!-- import stylesheet -->
 <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css" rel="external nofollow" >
 <!-- import iView -->
 <script src="//unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
 <div id="app">
 <template>
 <Row>
 <Col span="12"> 开始时间:
 <date-picker type="datetime" v-model="startTime" placeholder="请选择开始时间" :options="startTimeOption" @on-change="onStartTimeChange"></date-picker>
 </Col>
 <Col span="12"> 结束时间:
 <date-picker type="datetime" v-model="endTime" placeholder="请选择结束时间" :options="endTimeOption" @on-change="onEndTimeChange"></date-picker>
 </Col>
 </Row>
 </template>
 </div>
 <script>
 new Vue({
 el: '#app',
 data() {
 return {
  startTime: '',
  endTime: '2018-08-11 23:59:59',
  startTimeOption: {},
  endTimeOption: {}
 }
 },
 mounted() {
 this.startTime = '2018-08-08 00:00:00'
 this.endTime = '2018-08-11 23:59:59'
 this.onStartTimeChange(this.startTime)
 this.onEndTimeChange(this.endTime)
 },
 methods: {
 /**
  * 开始时间发生变化时触发,设置结束时间不可选择的日期
  * 结束时间应大于等于开始时间,且小于等于当前时间
  * @param {string} startTime 格式化后的日期
  * @param {string} type 当前的日期类型
  */
 onStartTimeChange(startTime, type) {
  this.endTimeOption = {
  disabledDate(endTime) {
  return endTime < new Date(startTime) || endTime > Date.now()
  }
  }
 },
 /**
  * 结束时间发生变化时触发,设置开始时间不可选择的日期
  * 开始时间小于等于结束时间,且小于等于当前时间
  * @param {string} date 格式化后的日期
  * @param {string} type 当前的日期类型
  */
 onEndTimeChange(endTime, type) {
  this.startTimeOption = {
  disabledDate(startTime) {
  return startTime > new Date(endTime) || startTime > Date.now()
  }
  }
 }
 }
 })
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
jQuery文字轮播特效
Feb 12 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 #Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 #Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 #Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 #Javascript
axios向后台传递数组作为参数的方法
Aug 11 #Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 #Javascript
axios的拦截请求与响应方法
Aug 11 #Javascript
You might like
PHP JSON 数据解析代码
2010/05/26 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
python之信息加密题目详解
2019/06/26 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
门卫岗位安全职责
2013/12/13 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
学校食堂标语
2014/10/06 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
Python实现自动玩连连看的脚本分享
2022/04/04 Python