other / mew-iview

Browse Code »

Commit c4e3fe331f8e4db897652a46f4ace5b6f231698a

Authored by Sergio Crisostomo 2018-01-16 22:23:58 +0100

1 parent e32b86e9

move date-range.vue to subfolder

Showing 2 changed files with 268 additions and 414 deletions Show diff stats

Inline Side-by-side

src/components/date-picker/panel/Date/date-range.vue 0 → 100644

Show/Hide comments View file @c4e3fe3

		1	+<template>
		2	+ <div :class="classes" @mousedown.prevent>
		3	+ <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
		4	+ <div
		5	+ :class="[prefixCls + '-shortcut']"
		6	+ v-for="shortcut in shortcuts"
		7	+ @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
		8	+ </div>
		9	+ <div :class="[prefixCls + '-body']">
		10	+ <div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
		11	+ <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
		12	+ <span
		13	+ :class="iconBtnCls('prev', '-double')"
		14	+ @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
		15	+ <span
		16	+ :class="iconBtnCls('prev')"
		17	+ @click="prevMonth('left')"
		18	+ v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
		19	+ <date-panel-label
		20	+ :date-panel-label="leftDatePanelLabel"
		21	+ :current-view="currentView"
		22	+ :date-prefix-cls="datePrefixCls"></date-panel-label>
		23	+ <span
		24	+ :class="iconBtnCls('next', '-double')"
		25	+ @click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
		26	+ <span
		27	+ :class="iconBtnCls('next')"
		28	+ @click="nextMonth('left')"
		29	+ v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
		30	+ </div>
		31	+ <component
		32	+ :is="pickerTable"
		33	+ ref="leftYearTable"
		34	+ v-if="currentView !== 'time'"
		35	+ :table-date="leftPanelDate"
		36	+ selection-mode="range"
		37	+ :disabled-date="disabledDate"
		38	+ :range-state="rangeState"
		39	+ :value="dates"
		40	+ @on-change-range="handleChangeRange"
		41	+ @on-pick="handleRangePick"
		42	+ @on-pick-click="handlePickClick"
		43	+ ></component>
		44	+ </div>
		45	+ <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
		46	+ <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
		47	+ <span
		48	+ :class="iconBtnCls('prev', '-double')"
		49	+ @click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
		50	+ <span
		51	+ :class="iconBtnCls('prev')"
		52	+ @click="prevMonth('right')"
		53	+ v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
		54	+ <date-panel-label
		55	+ :date-panel-label="rightDatePanelLabel"
		56	+ :current-view="currentView"
		57	+ :date-prefix-cls="datePrefixCls"></date-panel-label>
		58	+ <span
		59	+ :class="iconBtnCls('next', '-double')"
		60	+ @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
		61	+ <span
		62	+ :class="iconBtnCls('next')"
		63	+ @click="nextMonth('right')"
		64	+ v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
		65	+ </div>
		66	+ <component
		67	+ :is="pickerTable"
		68	+ ref="rightYearTable"
		69	+ v-if="currentView !== 'time'"
		70	+ :table-date="rightPanelDate"
		71	+ selection-mode="range"
		72	+ :range-state="rangeState"
		73	+ :disabled-date="disabledDate"
		74	+ :value="dates"
		75	+ @on-change-range="handleChangeRange"
		76	+ @on-pick="handleRangePick"
		77	+ @on-pick-click="handlePickClick"></component>
		78	+ </div>
		79	+ <div :class="[prefixCls + '-content']" v-show="isTime">
		80	+ <time-picker
		81	+ ref="timePicker"
		82	+ v-if="currentView === 'time'"
		83	+ :value="dates"
		84	+ :format="format"
		85	+ :time-disabled="timeDisabled"
		86	+ @on-pick="handleRangePick"
		87	+ @on-pick-click="handlePickClick"
		88	+ @on-pick-clear="handlePickClear"
		89	+ @on-pick-success="handlePickSuccess"
		90	+ @on-pick-toggle-time="handleToggleTime"
		91	+ ></time-picker>
		92	+ </div>
		93	+ <Confirm
		94	+ v-if="confirm"
		95	+ :show-time="showTime"
		96	+ :is-time="isTime"
		97	+ :time-disabled="timeDisabled"
		98	+ @on-pick-toggle-time="handleToggleTime"
		99	+ @on-pick-clear="handlePickClear"
		100	+ @on-pick-success="handlePickSuccess"></Confirm>
		101	+ </div>
		102	+ </div>
		103	+</template>
		104	+<script>
		105	+ import Icon from '../../../icon/icon.vue';
		106	+ import DateTable from '../../base/date-table.vue';
		107	+ import YearTable from '../../base/year-table.vue';
		108	+ import MonthTable from '../../base/month-table.vue';
		109	+ import TimePicker from '../Time/time-range.vue';
		110	+ import Confirm from '../../base/confirm.vue';
		111	+
		112	+ import { toDate, initTimeDate, formatDateLabels } from '../../util';
		113	+ import datePanelLabel from './date-panel-label.vue';
		114	+
		115	+ import Mixin from '../panel-mixin';
		116	+ import DateMixin from './date-panel-mixin';
		117	+ import Locale from '../../../../mixins/locale';
		118	+
		119	+ const prefixCls = 'ivu-picker-panel';
		120	+ const datePrefixCls = 'ivu-date-picker';
		121	+
		122	+
		123	+ export default {
		124	+ name: 'RangeDatePickerPanel',
		125	+ mixins: [ Mixin, Locale, DateMixin ],
		126	+ components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
		127	+ props: {
		128	+ // in the mixin
		129	+ },
		130	+ data(){
		131	+ const [minDate, maxDate] = this.value.map(date => date \|\| initTimeDate());
		132	+ return {
		133	+ prefixCls: prefixCls,
		134	+ datePrefixCls: datePrefixCls,
		135	+ dates: this.value,
		136	+ rangeState: {from: this.value[0], to: this.value[1], selecting: minDate && !maxDate},
		137	+ currentView: this.selectionMode \|\| 'range',
		138	+ leftPanelDate: minDate,
		139	+ rightPanelDate: new Date(minDate.getFullYear(), minDate.getMonth() + 1, minDate.getDate())
		140	+ };
		141	+ },
		142	+ computed: {
		143	+ classes(){
		144	+ return [
		145	+ `${prefixCls}-body-wrapper`,
		146	+ `${datePrefixCls}-with-range`,
		147	+ {
		148	+ [`${prefixCls}-with-sidebar`]: this.shortcuts.length
		149	+ }
		150	+ ];
		151	+ },
		152	+ pickerTable(){
		153	+ return `${this.currentView}-table`;
		154	+ },
		155	+ leftDatePanelLabel(){
		156	+ return this.panelLabelConfig('left');
		157	+ },
		158	+ rightDatePanelLabel(){
		159	+ return this.panelLabelConfig('right');
		160	+ },
		161	+ timeDisabled(){
		162	+ return !(this.dates[0] && this.dates[1]);
		163	+ }
		164	+ },
		165	+ watch: {
		166	+ value(newVal) {
		167	+ const minDate = newVal[0] ? toDate(newVal[0]) : null;
		168	+ const maxDate = newVal[1] ? toDate(newVal[1]) : null;
		169	+ this.dates = [minDate, maxDate];
		170	+ this.rangeState = {
		171	+ from: minDate,
		172	+ to: maxDate,
		173	+ selecting: false
		174	+ };
		175	+ },
		176	+ currentView(currentView){
		177	+ const leftMonth = this.leftPanelDate.getMonth();
		178	+ const rightMonth = this.rightPanelDate.getMonth();
		179	+ const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
		180	+
		181	+ if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
		182	+ this.changePanelDate('right', 'Month', 1);
		183	+ }
		184	+ if (currentView === 'month' && isSameYear){
		185	+ this.changePanelDate('right', 'FullYear', 1);
		186	+ }
		187	+ if (currentView === 'year' && isSameYear){
		188	+ this.changePanelDate('right', 'FullYear', 10);
		189	+ }
		190	+ }
		191	+ },
		192	+ methods: {
		193	+ panelLabelConfig (direction) {
		194	+ const locale = this.t('i.locale');
		195	+ const datePanelLabel = this.t('i.datepicker.datePanelLabel');
		196	+ const handler = type => {
		197	+ const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker;
		198	+ return () => fn(direction);
		199	+ };
		200	+
		201	+ const date = this[`${direction}PanelDate`];
		202	+ const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
		203	+
		204	+ return {
		205	+ separator: separator,
		206	+ labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
		207	+ };
		208	+ },
		209	+ prevYear (direction) {
		210	+ this.changePanelDate(direction, 'FullYear', -1);
		211	+ },
		212	+ nextYear (direction) {
		213	+ this.changePanelDate(direction, 'FullYear', 1);
		214	+ },
		215	+ prevMonth(direction){
		216	+ this.changePanelDate(direction, 'Month', -1);
		217	+ },
		218	+ nextMonth(direction){
		219	+ this.changePanelDate(direction, 'Month', 1);
		220	+ },
		221	+ changePanelDate(panel, type, increment){
		222	+ const current = new Date(this[`${panel}PanelDate`]);
		223	+ current[`set${type}`](current[`get${type}`]() + increment);
		224	+ this[`${panel}PanelDate`] = current;
		225	+
		226	+ // change other panels if they overlap
		227	+ const otherPanel = panel === 'left' ? 'right' : 'left';
		228	+ if (panel === 'left' && this.leftPanelDate >= this.rightPanelDate){
		229	+ this.changePanelDate(otherPanel, type, 1);
		230	+ }
		231	+ if (panel === 'right' && this.rightPanelDate <= this.leftPanelDate){
		232	+ this.changePanelDate(otherPanel, type, -1);
		233	+ }
		234	+ },
		235	+ showYearPicker () {
		236	+ this.currentView = 'year';
		237	+ },
		238	+ showMonthPicker () {
		239	+ this.currentView = 'month';
		240	+ },
		241	+ handleRangePick (val) {
		242	+ if (this.rangeState.selecting \|\| this.currentView === 'time'){
		243	+ const [minDate, maxDate] = [this.rangeState.from, val].sort((a, b) => a - b);
		244	+ this.dates = [minDate, maxDate];
		245	+ if (this.currentView === 'time'){
		246	+ this.dates = val;
		247	+ } else {
		248	+ this.rangeState = {
		249	+ from: minDate,
		250	+ to: maxDate,
		251	+ selecting: false
		252	+ };
		253	+ }
		254	+ this.handleConfirm(false);
		255	+ } else {
		256	+ this.rangeState = {
		257	+ from: val,
		258	+ to: null,
		259	+ selecting: true
		260	+ };
		261	+ }
		262	+ },
		263	+ handleChangeRange (val) {
		264	+ this.rangeState.to = val;
		265	+ },
		266	+ },
		267	+ };
		268	+</script>

src/components/date-picker/panel/date-range.vue deleted

View file @e32b86e

1	-<template>
2	- <div :class="classes" @mousedown.prevent>
3	- <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
4	- <div
5	- :class="[prefixCls + '-shortcut']"
6	- v-for="shortcut in shortcuts"
7	- @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
8	- </div>
9	- <div :class="[prefixCls + '-body']">
10	- <div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
11	- <div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
12	- <span
13	- :class="iconBtnCls('prev', '-double')"
14	- @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
15	- <span
16	- :class="iconBtnCls('prev')"
17	- @click="prevMonth"
18	- v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
19	- <date-panel-label
20	- :date-panel-label="leftDatePanelLabel"
21	- :current-view="leftCurrentView"
22	- :date-prefix-cls="datePrefixCls"/>
23	- <span
24	- :class="iconBtnCls('next', '-double')"
25	- @click="nextYear('left')"
26	- v-show="leftCurrentView === 'year' \|\| leftCurrentView === 'month'"><Icon type="ios-arrow-right"></Icon></span>
27	- </div>
28	- <date-table
29	- v-show="leftCurrentView === 'date'"
30	- :year="leftYear"
31	- :month="leftMonth"
32	- :date="date"
33	- :min-date="minDate"
34	- :max-date="maxDate"
35	- :range-state="rangeState"
36	- selection-mode="range"
37	- :disabled-date="disabledDate"
38	- @on-changerange="handleChangeRange"
39	- @on-pick="handleRangePick"
40	- @on-pick-click="handlePickClick"></date-table>
41	- <year-table
42	- ref="leftYearTable"
43	- v-show="leftCurrentView === 'year'"
44	- :year="leftTableYear"
45	- :date="leftTableDate"
46	- selection-mode="range"
47	- :disabled-date="disabledDate"
48	- @on-pick="handleLeftYearPick"
49	- @on-pick-click="handlePickClick"></year-table>
50	- <month-table
51	- ref="leftMonthTable"
52	- v-show="leftCurrentView === 'month'"
53	- :month="leftMonth"
54	- :date="leftTableDate"
55	- selection-mode="range"
56	- :disabled-date="disabledDate"
57	- @on-pick="handleLeftMonthPick"
58	- @on-pick-click="handlePickClick"></month-table>
59	- </div>
60	- <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
61	- <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
62	- <span
63	- :class="iconBtnCls('prev', '-double')"
64	- @click="prevYear('right')"
65	- v-show="rightCurrentView === 'year' \|\| rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span>
66	- <date-panel-label
67	- :date-panel-label="rightDatePanelLabel"
68	- :current-view="rightCurrentView"
69	- :date-prefix-cls="datePrefixCls"/>
70	- <span
71	- :class="iconBtnCls('next', '-double')"
72	- @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
73	- <span
74	- :class="iconBtnCls('next')"
75	- @click="nextMonth"
76	- v-show="rightCurrentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
77	- </div>
78	- <date-table
79	- v-show="rightCurrentView === 'date'"
80	- :year="rightYear"
81	- :month="rightMonth"
82	- :date="rightDate"
83	- :min-date="minDate"
84	- :max-date="maxDate"
85	- :range-state="rangeState"
86	- selection-mode="range"
87	- :disabled-date="disabledDate"
88	- @on-changerange="handleChangeRange"
89	- @on-pick="handleRangePick"
90	- @on-pick-click="handlePickClick"></date-table>
91	- <year-table
92	- ref="rightYearTable"
93	- v-show="rightCurrentView === 'year'"
94	- :year="rightTableYear"
95	- :date="rightTableDate"
96	- selection-mode="range"
97	- :disabled-date="disabledDate"
98	- @on-pick="handleRightYearPick"
99	- @on-pick-click="handlePickClick"></year-table>
100	- <month-table
101	- ref="rightMonthTable"
102	- v-show="rightCurrentView === 'month'"
103	- :month="rightMonth"
104	- :date="rightTableDate"
105	- selection-mode="range"
106	- :disabled-date="disabledDate"
107	- @on-pick="handleRightMonthPick"
108	- @on-pick-click="handlePickClick"></month-table>
109	- </div>
110	- <div :class="[prefixCls + '-content']" v-show="isTime">
111	- <time-picker
112	- ref="timePicker"
113	- v-show="isTime"
114	- @on-pick="handleTimePick"
115	- @on-pick-click="handlePickClick"></time-picker>
116	- </div>
117	- <Confirm
118	- v-if="confirm"
119	- :show-time="showTime"
120	- :is-time="isTime"
121	- :time-disabled="timeDisabled"
122	- @on-pick-toggle-time="handleToggleTime"
123	- @on-pick-clear="handlePickClear"
124	- @on-pick-success="handlePickSuccess"></Confirm>
125	- </div>
126	- </div>
127	-</template>
128	-<script>
129	- import Icon from '../../icon/icon.vue';
130	- import DateTable from '../base/date-table.vue';
131	- import YearTable from '../base/year-table.vue';
132	- import MonthTable from '../base/month-table.vue';
133	- import TimePicker from './time-range.vue';
134	- import Confirm from '../base/confirm.vue';
135	- import { toDate, prevMonth, nextMonth, initTimeDate, formatDateLabels } from '../util';
136	- import datePanelLabel from './date-panel-label.vue';
137	-
138	- import Mixin from './mixin';
139	- import Locale from '../../../mixins/locale';
140	-
141	- const prefixCls = 'ivu-picker-panel';
142	- const datePrefixCls = 'ivu-date-picker';
143	-
144	- export default {
145	- name: 'DatePicker',
146	- mixins: [ Mixin, Locale ],
147	- components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
148	- data () {
149	- return {
150	- prefixCls: prefixCls,
151	- datePrefixCls: datePrefixCls,
152	- shortcuts: [],
153	- date: initTimeDate(),
154	- value: '',
155	- minDate: '',
156	- maxDate: '',
157	- confirm: false,
158	- rangeState: {
159	- endDate: null,
160	- selecting: false
161	- },
162	- showTime: false,
163	- disabledDate: '',
164	- leftCurrentView: 'date',
165	- rightCurrentView: 'date',
166	- selectionMode: 'range',
167	- leftTableYear: null,
168	- rightTableYear: null,
169	- isTime: false,
170	- format: 'yyyy-MM-dd'
171	- };
172	- },
173	- computed: {
174	- classes () {
175	- return [
176	- `${prefixCls}-body-wrapper`,
177	- `${datePrefixCls}-with-range`,
178	- {
179	- [`${prefixCls}-with-sidebar`]: this.shortcuts.length
180	- }
181	- ];
182	- },
183	- leftYear () {
184	- return this.date.getFullYear();
185	- },
186	- leftTableDate () {
187	- if (this.leftCurrentView === 'year' \|\| this.leftCurrentView === 'month') {
188	- return new Date(this.leftTableYear);
189	- } else {
190	- return this.date;
191	- }
192	- },
193	- leftMonth () {
194	- return this.date.getMonth();
195	- },
196	- rightYear () {
197	- return this.rightDate.getFullYear();
198	- },
199	- rightTableDate () {
200	- if (this.rightCurrentView === 'year' \|\| this.rightCurrentView === 'month') {
201	- return new Date(this.rightTableYear);
202	- } else {
203	- return this.date;
204	- }
205	- },
206	- rightMonth () {
207	- return this.rightDate.getMonth();
208	- },
209	- rightDate () {
210	- const newDate = new Date(this.date);
211	- const month = newDate.getMonth();
212	- newDate.setDate(1);
213	-
214	- if (month === 11) {
215	- newDate.setFullYear(newDate.getFullYear() + 1);
216	- newDate.setMonth(0);
217	- } else {
218	- newDate.setMonth(month + 1);
219	- }
220	- return newDate;
221	- },
222	- leftDatePanelLabel () {
223	- if (!this.leftYear) return null; // not ready yet
224	- return this.panelLabelConfig('left');
225	- },
226	- rightDatePanelLabel () {
227	- if (!this.leftYear) return null; // not ready yet
228	- return this.panelLabelConfig('right');
229	- },
230	- timeDisabled () {
231	- return !(this.minDate && this.maxDate);
232	- }
233	- },
234	- watch: {
235	- value(newVal) {
236	- if (!newVal) {
237	- this.minDate = null;
238	- this.maxDate = null;
239	- } else if (Array.isArray(newVal)) {
240	- this.minDate = newVal[0] ? toDate(newVal[0]) : null;
241	- this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
242	- if (this.minDate) this.date = new Date(this.minDate);
243	- }
244	- if (this.showTime) this.$refs.timePicker.value = newVal;
245	- },
246	- minDate (val) {
247	- if (this.showTime) this.$refs.timePicker.date = val;
248	- },
249	- maxDate (val) {
250	- if (this.showTime) this.$refs.timePicker.dateEnd = val;
251	- },
252	- format (val) {
253	- if (this.showTime) this.$refs.timePicker.format = val;
254	- },
255	- isTime (val) {
256	- if (val) this.$refs.timePicker.updateScroll();
257	- }
258	- },
259	- methods: {
260	- panelLabelConfig (direction) {
261	- const locale = this.t('i.locale');
262	- const datePanelLabel = this.t('i.datepicker.datePanelLabel');
263	- const handler = type => {
264	- const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker;
265	- return () => fn(direction);
266	- };
267	-
268	- const date = new Date(this[`${direction}Year`], this[`${direction}Month`]);
269	- const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
270	-
271	- return {
272	- separator: separator,
273	- labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
274	- };
275	- },
276	- resetDate () {
277	- this.date = new Date(this.date);
278	- this.leftTableYear = this.date.getFullYear();
279	- this.rightTableYear = this.rightDate.getFullYear();
280	- },
281	- handleClear() {
282	- this.minDate = null;
283	- this.maxDate = null;
284	- this.date = new Date();
285	- this.handleConfirm();
286	- if (this.showTime) this.$refs.timePicker.handleClear();
287	- },
288	- resetView(reset = false) {
289	- this.leftCurrentView = 'date';
290	- this.rightCurrentView = 'date';
291	-
292	- this.leftTableYear = this.leftYear;
293	- this.rightTableYear = this.rightYear;
294	-
295	- if (reset) this.isTime = false;
296	- },
297	- prevYear (direction) {
298	- if (this[`${direction}CurrentView`] === 'year') {
299	- this.$refs[`${direction}YearTable`].prevTenYear();
300	- } else if (this[`${direction}CurrentView`] === 'month') {
301	- this[`${direction}TableYear`]--;
302	- } else {
303	- const date = this.date;
304	- date.setFullYear(date.getFullYear() - 1);
305	- this.resetDate();
306	- }
307	- },
308	- nextYear (direction) {
309	- if (this[`${direction}CurrentView`] === 'year') {
310	- this.$refs[`${direction}YearTable`].nextTenYear();
311	- } else if (this[`${direction}CurrentView`] === 'month') {
312	- this[`${direction}TableYear`]++;
313	- } else {
314	- const date = this.date;
315	- date.setFullYear(date.getFullYear() + 1);
316	- this.resetDate();
317	- }
318	- },
319	- prevMonth () {
320	- this.date = prevMonth(this.date);
321	- },
322	- nextMonth () {
323	- this.date = nextMonth(this.date);
324	- },
325	- handleLeftYearPick (year, close = true) {
326	- this.handleYearPick(year, close, 'left');
327	- },
328	- handleRightYearPick (year, close = true) {
329	- this.handleYearPick(year, close, 'right');
330	- },
331	- handleYearPick (year, close, direction) {
332	- this[`${direction}TableYear`] = year;
333	- if (!close) return;
334	-
335	- this[`${direction}CurrentView`] = 'month';
336	- },
337	- handleLeftMonthPick (month) {
338	- this.handleMonthPick(month, 'left');
339	- },
340	- handleRightMonthPick (month) {
341	- this.handleMonthPick(month, 'right');
342	- },
343	- handleMonthPick (month, direction) {
344	- let year = this[`${direction}TableYear`];
345	- if (direction === 'right') {
346	- if (month === 0) {
347	- month = 11;
348	- year--;
349	- } else {
350	- month--;
351	- }
352	- }
353	-
354	- this.date.setYear(year);
355	- this.date.setMonth(month);
356	- this[`${direction}CurrentView`] = 'date';
357	- this.resetDate();
358	- },
359	- showYearPicker (direction) {
360	- this[`${direction}CurrentView`] = 'year';
361	- this[`${direction}TableYear`] = this[`${direction}Year`];
362	- },
363	- showMonthPicker (direction) {
364	- this[`${direction}CurrentView`] = 'month';
365	- },
366	- handleConfirm(visible) {
367	- this.$emit('on-pick', [this.minDate, this.maxDate], visible);
368	- },
369	- handleRangePick (val, close = true) {
370	- if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
371	-
372	- this.minDate = val.minDate;
373	- this.maxDate = val.maxDate;
374	-
375	- // todo Remove when Chromium has fixed bug
376	- // https://github.com/iview/iview/issues/2122
377	- this.$nextTick(() => {
378	- this.minDate = val.minDate;
379	- this.maxDate = val.maxDate;
380	- });
381	- /* end of #2122 patch */
382	-
383	- if (!close) return;
384	-// if (!this.showTime) {
385	-// this.handleConfirm(false);
386	-// }
387	- this.handleConfirm(false);
388	- },
389	- handleChangeRange (val) {
390	- this.minDate = val.minDate;
391	- this.maxDate = val.maxDate;
392	- this.rangeState = val.rangeState;
393	- },
394	- handleToggleTime () {
395	- this.isTime = !this.isTime;
396	- },
397	- handleTimePick (date) {
398	- this.minDate = date[0];
399	- this.maxDate = date[1];
400	- this.handleConfirm(false);
401	- }
402	- },
403	- mounted () {
404	- if (this.showTime) {
405	- // todo 这里也到不了
406	- this.$refs.timePicker.date = this.minDate;
407	- this.$refs.timePicker.dateEnd = this.maxDate;
408	- this.$refs.timePicker.value = this.value;
409	- this.$refs.timePicker.format = this.format;
410	- this.$refs.timePicker.showDate = true;
411	- }
412	- }
413	- };
414	-</script>