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 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
深入理解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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
jquery实现拖动效果
2016/08/10 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python回调函数用法实例详解
2015/07/02 Python
python实现图书管理系统
2018/03/12 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
生物技术毕业生自荐信
2013/10/23 职场文书
大一新生学期自我评价
2014/04/09 职场文书
促销活动总结报告
2014/04/26 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
校园安全广播稿范文
2014/09/25 职场文书
婚前协议书范本两则
2014/10/16 职场文书
导游词范文
2015/02/13 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Golang日志包的使用
2022/04/20 Golang