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

最新推荐文章于 2023-07-07 19:08:28 发布

weixin_30247159

最新推荐文章于 2023-07-07 19:08:28 发布

阅读量333

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaguliuxiang/p/9459917.html

版权

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

转载于:https://www.cnblogs.com/xiaguliuxiang/p/9459917.html

weixin_30247159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js中使用iView日期选择器并设置开始时间结束时间校验

废话不多说直接上代码，拷贝代码保存为 html 文件，用浏览器打开就可以看到效果。在线查看效果：https://run.iviewui.com/PmGsUW3P 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 &lt...
复制链接

扫一扫