Commit 49bef31bd60061f787b2c55c4c81edfa610c78a4
1 parent
a2a78c38
release 0.9.12
release 0.9.12
Showing
2 changed files
with
69 additions
and
58 deletions
Show diff stats
package.json
test/routers/date.vue
1 | -<style> | |
2 | - body{ | |
3 | - height: auto !important; | |
4 | - } | |
5 | -</style> | |
6 | 1 | <template> |
7 | 2 | <row> |
8 | 3 | <i-col span="12"> |
9 | - <Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker> | |
10 | - <Time-picker :value="value" type="time" placeholder="选择时间" style="width: 168px"></Time-picker> | |
4 | + <Date-picker type="datetime" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker> | |
11 | 5 | </i-col> |
12 | - <!--<i-col span="12">--> | |
13 | - <!--<date-picker :value="value3" type="daterange" placement="bottom-start" placeholder="选择日期" style="width: 200px"></date-picker>--> | |
14 | - <!--</i-col>--> | |
15 | - <!--<i-col span="12">--> | |
16 | - <!--<time-picker--> | |
17 | - <!--:value="value"--> | |
18 | - <!--placeholder="选择时间"--> | |
19 | - <!--format="HH:mm:ss"--> | |
20 | - <!--:hide-disabled-options="false"--> | |
21 | - <!--:disabled-hours="[1,2,10,11]"--> | |
22 | - <!--@on-change="c"--> | |
23 | - <!--@on-ok="ok"--> | |
24 | - <!--@on-clear="clear"--> | |
25 | - <!--style="width: 168px"></time-picker>--> | |
26 | - <!--</i-col>--> | |
27 | 6 | <i-col span="12"> |
28 | - <Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker> | |
29 | - <!--<time-picker--> | |
30 | - <!--:value="value2"--> | |
31 | - <!--type="timerange"--> | |
32 | - <!--placeholder="选择时间"--> | |
33 | - <!--format="HH:mm:ss"--> | |
34 | - <!--:hide-disabled-options="false"--> | |
35 | - <!--@on-change="c"--> | |
36 | - <!--@on-ok="ok"--> | |
37 | - <!--@on-clear="clear"--> | |
38 | - <!--style="width: 168px"></time-picker>--> | |
7 | + <Date-picker type="datetimerange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker> | |
39 | 8 | </i-col> |
40 | - <i-button @click="time">time</i-button> | |
41 | 9 | </row> |
42 | 10 | </template> |
43 | 11 | <script> |
44 | 12 | export default { |
45 | 13 | data () { |
46 | 14 | return { |
47 | -// value: '2016-12-12 03:03:03', | |
48 | - value1: '2015-12-12 09:41:00', | |
49 | - value: '03:12:01', | |
50 | - value2: ['08:40:00', '09:40:00'], | |
51 | -// value2: [new Date(), new Date()], | |
52 | - value3: ['2016-12-01', '2016-12-25'], | |
53 | - val4: ['2016-12-01 09:41:12', '2016-12-25 12:23:32'] | |
54 | - } | |
55 | - }, | |
56 | - methods: { | |
57 | - | |
58 | - c (s) { | |
59 | - console.log(s); | |
60 | -// this.value2 = s; | |
61 | - }, | |
62 | - ok () { | |
63 | - console.log('ok'); | |
64 | - }, | |
65 | - clear () { | |
66 | - console.log('clear'); | |
67 | - }, | |
68 | - time () { | |
69 | - this.value = new Date(); | |
15 | + options1: { | |
16 | + shortcuts: [ | |
17 | + { | |
18 | + text: '今天', | |
19 | + value () { | |
20 | + return new Date(); | |
21 | + }, | |
22 | + onClick: (picker) => { | |
23 | + this.$Message.info('点击了今天'); | |
24 | + } | |
25 | + }, | |
26 | + { | |
27 | + text: '昨天', | |
28 | + value () { | |
29 | + const date = new Date(); | |
30 | + date.setTime(date.getTime() - 3600 * 1000 * 24); | |
31 | + return date; | |
32 | + }, | |
33 | + onClick: (picker) => { | |
34 | + this.$Message.info('点击了昨天'); | |
35 | + } | |
36 | + }, | |
37 | + { | |
38 | + text: '一周前', | |
39 | + value () { | |
40 | + const date = new Date(); | |
41 | + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); | |
42 | + return date; | |
43 | + }, | |
44 | + onClick: (picker) => { | |
45 | + this.$Message.info('点击了一周前'); | |
46 | + } | |
47 | + } | |
48 | + ] | |
49 | + }, | |
50 | + options2: { | |
51 | + shortcuts: [ | |
52 | + { | |
53 | + text: '最近一周', | |
54 | + value () { | |
55 | + const end = new Date(); | |
56 | + const start = new Date(); | |
57 | + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); | |
58 | + return [start, end]; | |
59 | + } | |
60 | + }, | |
61 | + { | |
62 | + text: '最近一个月', | |
63 | + value () { | |
64 | + const end = new Date(); | |
65 | + const start = new Date(); | |
66 | + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); | |
67 | + return [start, end]; | |
68 | + } | |
69 | + }, | |
70 | + { | |
71 | + text: '最近三个月', | |
72 | + value () { | |
73 | + const end = new Date(); | |
74 | + const start = new Date(); | |
75 | + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); | |
76 | + return [start, end]; | |
77 | + } | |
78 | + } | |
79 | + ] | |
80 | + } | |
70 | 81 | } |
71 | 82 | } |
72 | 83 | } | ... | ... |