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>
posted @ 2018-08-11 15:00  侠骨留香  阅读(19223)  评论(4)  编辑  收藏  举报