elementUI如何禁用时间组件日期

2019-05-19 分类：Vue 作者：huanggr 阅读（4528）

elementUI如何禁用时间组件日期

在开发中有时候会有这样的需求，时间控件中只需要显示今天以及今天以前的日期，别的日期都需要禁用，刚拿到这个需求，我转手就翻开了element-ui的文档，我们可以用到picker-options这个属性
这个属性在elment-ui里面的介绍是这个样子的：
elementUI如何禁用时间组件日期

好了，下面我们就要用这个属性做一些事情了。示例如下：

案例一：时间组件只显示今天以及以前的时间，对于今后的时间都为禁用状态

今天为19年5月18日，所以只能显示5月18日及以前的时间

效果图如下：

源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<template>
<div>
<el-date-picker v-model="search.time"
type="daterange"
:picker-options="flag"
range-separator="-"
start-placeholder="开始日期"
@change="changeTime"
end-placeholder="结束日期">
</el-date-picker>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
search: {
time: ''
},
flag: {
disabledDate: (time) => {
return time.getTime() > Date.now();
}
}
}
},
methods: {
changeTime (time) {
if (time) {
var d = new Date(time[0]);
this.search.examStartTime = this.timeFormat(d.getTime(), 'y-m-d h:i:s');
d = new Date(time[1]);
this.search.examEndTime = this.timeFormat(d.getTime(), 'y-m-d h:i:s');
} else {
this.search.examStartTime = '';
this.search.examEndTime = '';
}
console.log("当前获取到的值为", this.search)
},
timeFormat (time, format) {
if (!Number(time)) return time;
var formatStr = '';
var D = new Date(time);
var y = D.getFullYear();
var m = D.getMonth() + 1;
var d = D.getDate();
var h = D.getHours();
var i = D.getMinutes();
var s = D.getSeconds();
var w = D.getDay();

m = (m > 10) ? m : ('0' + m);
d = (d > 10) ? d : ('0' + d);
h = (h > 10) ? h : ('0' + h);
i = (i > 10) ? i : ('0' + i);
s = (s > 10) ? s : ('0' + s);

switch (w) {
case 0: w = '星期天'; break;
case 1: w = '星期一'; break;
case 2: w = '星期二'; break;
case 3: w = '星期三'; break;
case 4: w = '星期四'; break;
case 5: w = '星期五'; break;
case 6: w = '星期六'; break;
}

formatStr = format.replace(/y/g, y);
formatStr = formatStr.replace(/m/g, m);
formatStr = formatStr.replace(/d/g, d);
formatStr = formatStr.replace(/h/g, h);
formatStr = formatStr.replace(/(i)/g, i);
formatStr = formatStr.replace(/s/g, s);
formatStr = formatStr.replace(/w/g, w);
return formatStr;
}
}
}
</script>