-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (159 loc) · 6.95 KB
/
index.html
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuedateTimePicker</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="css/vueIndex.css">
</head>
<body>
<div id="app">
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker v-model="value3" type="datetimerange" placeholder="选择时间范围">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" align="right">
</el-date-picker>
</div>
</template>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<!-- 引入组件库 -->
<script src="js/vueIndex.js"></script>
<script>
var Main = {
data() {
return {
pickerOptions2: {
shortcuts: [
{
text:"最后15分钟",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 15*60 * 1000);
picker.$emit('pick', [start, end]);
}
},
{
text:"最后30分钟",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 30*60 * 1000);
picker.$emit('pick', [start, end]);
}
},{
text:"最后1小时",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000);
picker.$emit('pick', [start, end]);
}
},{
text:"最后4小时",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000*4);
picker.$emit('pick', [start, end]);
}
},{
text:"最后12小时",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000*12);
picker.$emit('pick', [start, end]);
}
},{
text:"最后24小时",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000*24);
picker.$emit('pick', [start, end]);
}
},{
text: '最后一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
},{
text: '最后30天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},{
text: '最后60天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
picker.$emit('pick', [start, end]);
}
},{
text: '最后90天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
},{
text: '最后6个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30*6);
picker.$emit('pick', [start, end]);
}
},{
text: '最后1年',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30*12);
picker.$emit('pick', [start, end]);
}
},/*{
text:"今天"
},{
text:"咋天"
},{
text:"前天"
},{
text:"本周"
},{
text:"上周"
},{
text:"本月"
},{
text:"上月"
},{
text:"今年"
},*/{
text:"zhanwei"
}]
},
value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value4: ''
};
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
</script>