other / mew-iview

Commit ca8e830cc36301f2347c63a635f8733af88d3da4

Authored by Sergio Crisostomo
1 parent c4e3fe33

move files to subfolders

Showing 7 changed files with 183 additions and 271 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/month-table.vue deleted
View file @c4e3fe3
1 -<template>  
2 - <div :class="classes" @click="handleClick">  
3 - <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ tCell(cell.text) }}</em></span>  
4 - </div>  
5 -</template>  
6 -<script>  
7 - import { deepCopy } from '../../../utils/assist';  
8 - import Locale from '../../../mixins/locale';  
9 - const prefixCls = 'ivu-date-picker-cells';  
10 -  
11 - export default {  
12 - mixins: [ Locale ],  
13 - props: {  
14 - date: {},  
15 - month: {  
16 - type: Number  
17 - },  
18 - disabledDate: {},  
19 - selectionMode: {  
20 - default: 'month'  
21 - }  
22 - },  
23 - computed: {  
24 - classes () {  
25 - return [  
26 - `${prefixCls}`,  
27 - `${prefixCls}-month`  
28 - ];  
29 - },  
30 - cells () {  
31 - let cells = [];  
32 - const cell_tmpl = {  
33 - text: '',  
34 - selected: false,  
35 - disabled: false  
36 - };  
37 -  
38 - for (let i = 0; i < 12; i++) {  
39 - const cell = deepCopy(cell_tmpl);  
40 - cell.text = i + 1;  
41 -  
42 - const date = new Date(this.date);  
43 - date.setMonth(i);  
44 - cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'month';  
45 -  
46 - cell.selected = Number(this.month) === i;  
47 - cells.push(cell);  
48 - }  
49 -  
50 - return cells;  
51 - }  
52 - },  
53 - methods: {  
54 - getCellCls (cell) {  
55 - return [  
56 - `${prefixCls}-cell`,  
57 - {  
58 - [`${prefixCls}-cell-selected`]: cell.selected,  
59 - [`${prefixCls}-cell-disabled`]: cell.disabled  
60 - }  
61 - ];  
62 - },  
63 - handleClick (event) {  
64 - const target = event.target;  
65 - if (target.tagName === 'EM') {  
66 - const index = parseInt(event.target.getAttribute('index'));  
67 - const cell = this.cells[index];  
68 - if (cell.disabled) return;  
69 -  
70 - this.$emit('on-pick', index);  
71 - }  
72 - this.$emit('on-pick-click');  
73 - },  
74 - tCell (cell) {  
75 - return this.t(`i.datepicker.months.m${cell}`);  
76 - }  
77 - }  
78 - };  
79 -</script>  
src/components/date-picker/base/year-table.vue
  Show/Hide comments   View file @ca8e830
1 <template> 1 <template>
2 - <div :class="classes" @click="handleClick">  
3 - <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ cell.text }}</em></span> 2 + <div :class="classes">
  3 + <span
  4 + :class="getCellCls(cell)"
  5 + v-for="cell in cells"
  6 + @click="handleClick(cell)"
  7 + @mouseenter="handleMouseMove(cell)"
  8 + >
  9 + <em>{{ cell.date.getFullYear() }}</em>
  10 + </span>
4 </div> 11 </div>
5 </template> 12 </template>
6 <script> 13 <script>
  14 + import { clearHours, isInRange } from '../util';
7 import { deepCopy } from '../../../utils/assist'; 15 import { deepCopy } from '../../../utils/assist';
8 - const prefixCls = 'ivu-date-picker-cells'; 16 + import mixin from './mixin';
  17 + import prefixCls from './prefixCls';
9 18
10 export default { 19 export default {
11 - props: {  
12 - date: {},  
13 - year: {},  
14 - disabledDate: {},  
15 - selectionMode: {  
16 - default: 'year'  
17 - }  
18 - }, 20 + mixins: [ mixin ],
  21 +
  22 + props: {/* in mixin */},
19 computed: { 23 computed: {
20 - classes () { 24 + classes() {
21 return [ 25 return [
22 `${prefixCls}`, 26 `${prefixCls}`,
23 `${prefixCls}-year` 27 `${prefixCls}-year`
24 ]; 28 ];
25 }, 29 },
26 startYear() { 30 startYear() {
27 - return Math.floor(this.year / 10) * 10; 31 + return Math.floor(this.tableDate.getFullYear() / 10) * 10;
28 }, 32 },
29 cells () { 33 cells () {
30 let cells = []; 34 let cells = [];
@@ -34,15 +38,18 @@ @@ -34,15 +38,18 @@
34 disabled: false 38 disabled: false
35 }; 39 };
36 40
37 - for (let i = 0; i < 10; i++) {  
38 - const cell = deepCopy(cell_tmpl);  
39 - cell.text = this.startYear + i; 41 + const rangeStart = this.rangeState.from && clearHours(new Date(this.rangeState.from.getFullYear(), 0, 1));
  42 + const rangeEnd = this.rangeState.to && clearHours(new Date(this.rangeState.to.getFullYear(), 0, 1));
  43 + const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), 0, 1)));
40 44
41 - const date = new Date(this.date);  
42 - date.setFullYear(cell.text);  
43 - cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'year';  
44 45
45 - cell.selected = Number(this.year) === cell.text; 46 + for (let i = 0; i < 10; i++) {
  47 + const cell = deepCopy(cell_tmpl);
  48 + cell.date = new Date(this.startYear + i, 0, 1);
  49 + cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'year';
  50 + const time = clearHours(cell.date);
  51 + cell.range = isInRange(time, rangeStart, rangeEnd);
  52 + cell.selected = selectedDays.includes(time);
46 cells.push(cell); 53 cells.push(cell);
47 } 54 }
48 55
@@ -55,26 +62,11 @@ @@ -55,26 +62,11 @@
55 `${prefixCls}-cell`, 62 `${prefixCls}-cell`,
56 { 63 {
57 [`${prefixCls}-cell-selected`]: cell.selected, 64 [`${prefixCls}-cell-selected`]: cell.selected,
58 - [`${prefixCls}-cell-disabled`]: cell.disabled 65 + [`${prefixCls}-cell-disabled`]: cell.disabled,
  66 + [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
59 } 67 }
60 ]; 68 ];
61 }, 69 },
62 - nextTenYear() {  
63 - this.$emit('on-pick', Number(this.year) + 10, false);  
64 - },  
65 - prevTenYear() {  
66 - this.$emit('on-pick', Number(this.year) - 10, false);  
67 - },  
68 - handleClick (event) {  
69 - const target = event.target;  
70 - if (target.tagName === 'EM') {  
71 - const cell = this.cells[parseInt(event.target.getAttribute('index'))];  
72 - if (cell.disabled) return;  
73 -  
74 - this.$emit('on-pick', cell.text);  
75 - }  
76 - this.$emit('on-pick-click');  
77 - }  
78 } 70 }
79 }; 71 };
80 </script> 72 </script>
src/components/date-picker/panel/date-panel-label.vue renamed to src/components/date-picker/panel/Date/date-panel-label.vue
  Show/Hide comments   View file @ca8e830
src/components/date-picker/panel/Date/date-panel-mixin.js 0 → 100644
  Show/Hide comments   View file @ca8e830
  1 +
  2 +import { oneOf } from '../../../../utils/assist';
  3 +import {initTimeDate } from '../../util';
  4 +
  5 +
  6 +export default {
  7 + props: {
  8 + confirm: {
  9 + type: Boolean,
  10 + default: false
  11 + },
  12 + showTime: {
  13 + type: Boolean,
  14 + default: false
  15 + },
  16 + format: {
  17 + type: String,
  18 + default: 'yyyy-MM-dd'
  19 + },
  20 + selectionMode: {
  21 + type: String,
  22 + validator (value) {
  23 + return oneOf(value, ['year', 'month', 'date', 'time']);
  24 + },
  25 + default: 'date'
  26 + },
  27 + shortcuts: {
  28 + type: Array,
  29 + default: () => []
  30 + },
  31 + disabledDate: {
  32 + type: Function,
  33 + default: () => false
  34 + },
  35 + value: {
  36 + type: Array,
  37 + default: () => [initTimeDate(), initTimeDate()]
  38 + }
  39 + },
  40 + computed: {
  41 + isTime(){
  42 + return this.currentView === 'time';
  43 + }
  44 + },
  45 + methods: {
  46 + handleToggleTime(){
  47 + this.currentView = this.currentView === 'time' ? this.selectionMode : 'time';
  48 + },
  49 + }
  50 +};
src/components/date-picker/panel/time-range.vue renamed to src/components/date-picker/panel/Time/time-range.vue
  Show/Hide comments   View file @ca8e830
@@ -10,9 +10,9 @@ @@ -10,9 +10,9 @@
10 ref="timeSpinner" 10 ref="timeSpinner"
11 :steps="steps" 11 :steps="steps"
12 :show-seconds="showSeconds" 12 :show-seconds="showSeconds"
13 - :hours="hours"  
14 - :minutes="minutes"  
15 - :seconds="seconds" 13 + :hours="dateStart.getHours()"
  14 + :minutes="dateStart.getMinutes()"
  15 + :seconds="dateStart.getSeconds()"
16 :disabled-hours="disabledHours" 16 :disabled-hours="disabledHours"
17 :disabled-minutes="disabledMinutes" 17 :disabled-minutes="disabledMinutes"
18 :disabled-seconds="disabledSeconds" 18 :disabled-seconds="disabledSeconds"
@@ -29,9 +29,9 @@ @@ -29,9 +29,9 @@
29 ref="timeSpinnerEnd" 29 ref="timeSpinnerEnd"
30 :steps="steps" 30 :steps="steps"
31 :show-seconds="showSeconds" 31 :show-seconds="showSeconds"
32 - :hours="hoursEnd"  
33 - :minutes="minutesEnd"  
34 - :seconds="secondsEnd" 32 + :hours="dateEnd.getHours()"
  33 + :minutes="dateEnd.getMinutes()"
  34 + :seconds="dateEnd.getSeconds()"
35 :disabled-hours="disabledHours" 35 :disabled-hours="disabledHours"
36 :disabled-minutes="disabledMinutes" 36 :disabled-minutes="disabledMinutes"
37 :disabled-seconds="disabledSeconds" 37 :disabled-seconds="disabledSeconds"
@@ -47,46 +47,47 @@ @@ -47,46 +47,47 @@
47 </div> 47 </div>
48 </template> 48 </template>
49 <script> 49 <script>
50 - import TimeSpinner from '../base/time-spinner.vue';  
51 - import Confirm from '../base/confirm.vue'; 50 + import TimeSpinner from '../../base/time-spinner.vue';
  51 + import Confirm from '../../base/confirm.vue';
  52 + import Options from '../../time-mixins';
52 53
53 - import Mixin from './mixin';  
54 - import Locale from '../../../mixins/locale';  
55 54
56 - import { initTimeDate, toDate, formatDate, formatDateLabels } from '../util'; 55 + import Mixin from '../panel-mixin';
  56 + import Locale from '../../../../mixins/locale';
  57 +
  58 + import { initTimeDate, formatDateLabels } from '../../util';
57 59
58 const prefixCls = 'ivu-picker-panel'; 60 const prefixCls = 'ivu-picker-panel';
59 const timePrefixCls = 'ivu-time-picker'; 61 const timePrefixCls = 'ivu-time-picker';
60 62
  63 + const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
  64 +
61 export default { 65 export default {
62 - name: 'TimePicker',  
63 - mixins: [ Mixin, Locale ], 66 + name: 'RangeTimePickerPanel',
  67 + mixins: [ Mixin, Locale, Options ],
64 components: { TimeSpinner, Confirm }, 68 components: { TimeSpinner, Confirm },
65 props: { 69 props: {
66 steps: { 70 steps: {
67 type: Array, 71 type: Array,
68 default: () => [] 72 default: () => []
69 - } 73 + },
  74 + format: {
  75 + type: String,
  76 + default: 'HH:mm:ss'
  77 + },
  78 + value: {
  79 + type: Array,
  80 + required: true
  81 + },
70 }, 82 },
71 data () { 83 data () {
  84 + const [dateStart, dateEnd] = this.value.slice();
72 return { 85 return {
73 prefixCls: prefixCls, 86 prefixCls: prefixCls,
74 timePrefixCls: timePrefixCls, 87 timePrefixCls: timePrefixCls,
75 - format: 'HH:mm:ss',  
76 showDate: false, 88 showDate: false,
77 - date: initTimeDate(),  
78 - dateEnd: initTimeDate(),  
79 - value: '',  
80 - hours: '',  
81 - minutes: '',  
82 - seconds: '',  
83 - hoursEnd: '',  
84 - minutesEnd: '',  
85 - secondsEnd: '',  
86 - disabledHours: [],  
87 - disabledMinutes: [],  
88 - disabledSeconds: [],  
89 - hideDisabledOptions: false, 89 + dateStart: dateStart || initTimeDate(),
  90 + dateEnd: dateEnd || initTimeDate(),
90 confirm: false 91 confirm: false
91 }; 92 };
92 }, 93 },
@@ -111,28 +112,10 @@ @@ -111,28 +112,10 @@
111 } 112 }
112 }, 113 },
113 watch: { 114 watch: {
114 - value (newVal) {  
115 - if (!newVal) return;  
116 - if (Array.isArray(newVal)) {  
117 - const valStart = newVal[0] ? toDate(newVal[0]) : false;  
118 - const valEnd = newVal[1] ? toDate(newVal[1]) : false;  
119 -  
120 - if (valStart && valEnd) {  
121 - this.handleChange(  
122 - {  
123 - hours: valStart.getHours(),  
124 - minutes: valStart.getMinutes(),  
125 - seconds: valStart.getSeconds()  
126 - },  
127 - {  
128 - hours: valEnd.getHours(),  
129 - minutes: valEnd.getMinutes(),  
130 - seconds: valEnd.getSeconds()  
131 - },  
132 - false  
133 - );  
134 - }  
135 - } 115 + value (dates) {
  116 + const [dateStart, dateEnd] = dates.slice();
  117 + this.dateStart = dateStart || initTimeDate();
  118 + this.dateEnd = dateEnd || initTimeDate();
136 } 119 }
137 }, 120 },
138 methods: { 121 methods: {
@@ -142,59 +125,25 @@ @@ -142,59 +125,25 @@
142 const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate()); 125 const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
143 return [labels[0].label, separator, labels[1].label].join(''); 126 return [labels[0].label, separator, labels[1].label].join('');
144 }, 127 },
145 - handleClear() {  
146 - this.date = initTimeDate();  
147 - this.dateEnd = initTimeDate();  
148 - this.hours = '';  
149 - this.minutes = '';  
150 - this.seconds = '';  
151 - this.hoursEnd = '';  
152 - this.minutesEnd = '';  
153 - this.secondsEnd = '';  
154 - },  
155 - handleChange (date, dateEnd, emit = true) {  
156 - const oldDateEnd = new Date(this.dateEnd); 128 + handleChange (start, end, emit = true) {
  129 +
  130 + const dateStart = new Date(this.dateStart);
  131 + let dateEnd = new Date(this.dateEnd);
  132 +
  133 + // set dateStart
  134 + Object.keys(start).forEach(type => {
  135 + dateStart[`set${capitalize(type)}`](start[type])
  136 + });
  137 +
  138 + // set dateEnd
  139 + Object.keys(end).forEach(type => {
  140 + dateEnd[`set${capitalize(type)}`](end[type]);
  141 + });
157 142
158 - if (date.hours !== undefined) {  
159 - this.date.setHours(date.hours);  
160 - this.hours = this.date.getHours();  
161 - }  
162 - if (date.minutes !== undefined) {  
163 - this.date.setMinutes(date.minutes);  
164 - this.minutes = this.date.getMinutes();  
165 - }  
166 - if (date.seconds !== undefined) {  
167 - this.date.setSeconds(date.seconds);  
168 - this.seconds = this.date.getSeconds();  
169 - }  
170 - if (dateEnd.hours !== undefined) {  
171 - this.dateEnd.setHours(dateEnd.hours);  
172 - this.hoursEnd = this.dateEnd.getHours();  
173 - }  
174 - if (dateEnd.minutes !== undefined) {  
175 - this.dateEnd.setMinutes(dateEnd.minutes);  
176 - this.minutesEnd = this.dateEnd.getMinutes();  
177 - }  
178 - if (dateEnd.seconds !== undefined) {  
179 - this.dateEnd.setSeconds(dateEnd.seconds);  
180 - this.secondsEnd = this.dateEnd.getSeconds();  
181 - }  
182 // judge endTime > startTime? 143 // judge endTime > startTime?
183 - if (this.dateEnd < this.date) {  
184 - this.$nextTick(() => {  
185 - this.dateEnd = new Date(this.date);  
186 - this.hoursEnd = this.dateEnd.getHours();  
187 - this.minutesEnd = this.dateEnd.getMinutes();  
188 - this.secondsEnd = this.dateEnd.getSeconds(); 144 + if (dateEnd < dateStart) dateEnd = dateStart;
189 145
190 - const format = 'yyyy-MM-dd HH:mm:ss';  
191 - if (formatDate(oldDateEnd, format) !== formatDate(this.dateEnd, format)) {  
192 - if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);  
193 - }  
194 - });  
195 - } else {  
196 - if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);  
197 - } 146 + if (emit) this.$emit('on-pick', [dateStart, dateEnd], true);
198 }, 147 },
199 handleStartChange (date) { 148 handleStartChange (date) {
200 this.handleChange(date, {}); 149 this.handleChange(date, {});
src/components/date-picker/panel/time.vue renamed to src/components/date-picker/panel/Time/time.vue
  Show/Hide comments   View file @ca8e830
@@ -7,9 +7,9 @@ @@ -7,9 +7,9 @@
7 ref="timeSpinner" 7 ref="timeSpinner"
8 :show-seconds="showSeconds" 8 :show-seconds="showSeconds"
9 :steps="steps" 9 :steps="steps"
10 - :hours="hours"  
11 - :minutes="minutes"  
12 - :seconds="seconds" 10 + :hours="date.getHours()"
  11 + :minutes="date.getMinutes()"
  12 + :seconds="date.getSeconds()"
13 :disabled-hours="disabledHours" 13 :disabled-hours="disabledHours"
14 :disabled-minutes="disabledMinutes" 14 :disabled-minutes="disabledMinutes"
15 :disabled-seconds="disabledSeconds" 15 :disabled-seconds="disabledSeconds"
@@ -25,42 +25,45 @@ @@ -25,42 +25,45 @@
25 </div> 25 </div>
26 </template> 26 </template>
27 <script> 27 <script>
28 - import TimeSpinner from '../base/time-spinner.vue';  
29 - import Confirm from '../base/confirm.vue'; 28 + import TimeSpinner from '../../base/time-spinner.vue';
  29 + import Confirm from '../../base/confirm.vue';
  30 + import Options from '../../time-mixins';
30 31
31 - import Mixin from './mixin';  
32 - import Locale from '../../../mixins/locale';  
33 32
34 - import { initTimeDate } from '../util'; 33 + import Mixin from '../panel-mixin';
  34 + import Locale from '../../../../mixins/locale';
  35 +
  36 + import { initTimeDate } from '../../util';
35 37
36 const prefixCls = 'ivu-picker-panel'; 38 const prefixCls = 'ivu-picker-panel';
37 const timePrefixCls = 'ivu-time-picker'; 39 const timePrefixCls = 'ivu-time-picker';
38 40
  41 + const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
  42 +
39 export default { 43 export default {
40 - name: 'TimePicker',  
41 - mixins: [ Mixin, Locale ], 44 + name: 'TimePickerPanel',
  45 + mixins: [ Mixin, Locale, Options ],
42 components: { TimeSpinner, Confirm }, 46 components: { TimeSpinner, Confirm },
43 props: { 47 props: {
44 steps: { 48 steps: {
45 type: Array, 49 type: Array,
46 default: () => [] 50 default: () => []
47 - } 51 + },
  52 + format: {
  53 + type: String,
  54 + default: 'HH:mm:ss'
  55 + },
  56 + value: {
  57 + type: Array,
  58 + required: true
  59 + },
48 }, 60 },
49 data () { 61 data () {
50 return { 62 return {
51 prefixCls: prefixCls, 63 prefixCls: prefixCls,
52 timePrefixCls: timePrefixCls, 64 timePrefixCls: timePrefixCls,
53 - date: initTimeDate(),  
54 - value: '', 65 + date: this.value[0] || initTimeDate(),
55 showDate: false, 66 showDate: false,
56 - format: 'HH:mm:ss',  
57 - hours: '',  
58 - minutes: '',  
59 - seconds: '',  
60 - disabledHours: [],  
61 - disabledMinutes: [],  
62 - disabledSeconds: [],  
63 - hideDisabledOptions: false,  
64 confirm: false 67 confirm: false
65 }; 68 };
66 }, 69 },
@@ -68,7 +71,7 @@ @@ -68,7 +71,7 @@
68 showSeconds () { 71 showSeconds () {
69 return (this.format || '').indexOf('ss') !== -1; 72 return (this.format || '').indexOf('ss') !== -1;
70 }, 73 },
71 - visibleDate () { 74 + visibleDate () { // TODO
72 const date = this.date; 75 const date = this.date;
73 const month = date.getMonth() + 1; 76 const month = date.getMonth() + 1;
74 const tYear = this.t('i.datepicker.year'); 77 const tYear = this.t('i.datepicker.year');
@@ -77,44 +80,22 @@ @@ -77,44 +80,22 @@
77 } 80 }
78 }, 81 },
79 watch: { 82 watch: {
80 - value (newVal) {  
81 - if (!newVal) return; 83 + value (dates) {
  84 + let newVal = dates[0] || initTimeDate();
82 newVal = new Date(newVal); 85 newVal = new Date(newVal);
83 - if (!isNaN(newVal)) {  
84 - this.date = newVal;  
85 - this.handleChange({  
86 - hours: newVal.getHours(),  
87 - minutes: newVal.getMinutes(),  
88 - seconds: newVal.getSeconds()  
89 - }, false);  
90 - } 86 + this.date = newVal;
91 } 87 }
92 }, 88 },
93 methods: { 89 methods: {
94 - handleClear() {  
95 - this.date = initTimeDate();  
96 - this.hours = '';  
97 - this.minutes = '';  
98 - this.seconds = '';  
99 - },  
100 handleChange (date, emit = true) { 90 handleChange (date, emit = true) {
101 - if (date.hours !== undefined) {  
102 - this.date.setHours(date.hours);  
103 - this.hours = this.date.getHours();  
104 - }  
105 - if (date.minutes !== undefined) {  
106 - this.date.setMinutes(date.minutes);  
107 - this.minutes = this.date.getMinutes();  
108 - }  
109 - if (date.seconds !== undefined) {  
110 - this.date.setSeconds(date.seconds);  
111 - this.seconds = this.date.getSeconds();  
112 - }  
113 - if (emit) this.$emit('on-pick', this.date, true); 91 +
  92 + const newDate = new Date(this.date);
  93 + Object.keys(date).forEach(
  94 + type => newDate[`set${capitalize(type)}`](date[type])
  95 + );
  96 +
  97 + if (emit) this.$emit('on-pick', newDate, true);
114 }, 98 },
115 - updateScroll () {  
116 - this.$refs.timeSpinner.updateScroll();  
117 - }  
118 }, 99 },
119 mounted () { 100 mounted () {
120 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; 101 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
src/components/date-picker/panel/mixin.js renamed to src/components/date-picker/panel/panel-mixin.js
  Show/Hide comments   View file @ca8e830
@@ -15,13 +15,32 @@ export default { @@ -15,13 +15,32 @@ export default {
15 if (shortcut.onClick) shortcut.onClick(this); 15 if (shortcut.onClick) shortcut.onClick(this);
16 }, 16 },
17 handlePickClear () { 17 handlePickClear () {
  18 + this.resetView();
18 this.$emit('on-pick-clear'); 19 this.$emit('on-pick-clear');
19 }, 20 },
20 handlePickSuccess () { 21 handlePickSuccess () {
  22 + this.resetView();
21 this.$emit('on-pick-success'); 23 this.$emit('on-pick-success');
22 }, 24 },
23 handlePickClick () { 25 handlePickClick () {
24 this.$emit('on-pick-click'); 26 this.$emit('on-pick-click');
25 - } 27 + },
  28 + resetView(){
  29 + setTimeout(
  30 + () => this.currentView = this.selectionMode,
  31 + 500 // 500ms so the dropdown can close before changing
  32 + );
  33 + },
  34 + handleClear() {
  35 + this.dates = this.dates.map(() => null);
  36 + this.rangeState = {};
  37 + this.$emit('on-pick', this.dates);
  38 + this.handleConfirm();
  39 + // if (this.showTime) this.$refs.timePicker.handleClear();
  40 + },
  41 + handleConfirm(visible) {
  42 + this.$emit('on-pick', this.dates, visible);
  43 + },
  44 +
26 } 45 }
27 }; 46 };