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

Wrap text 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>