chenhaodong / mew-iview

Commit 0a5c5f413240bafbaeafe3c44a0d90d5d2091079

Authored by 梁灏
1 parent fa3a666d

update DatePicker 

update DatePicker
Showing 5 changed files with 138 additions and 43 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/date-table.vue
  Show/Hide comments   View file @0a5c5f4
@@ -67,7 +67,6 @@ @@ -67,7 +67,6 @@
67 if (newVal && !oldVal) { 67 if (newVal && !oldVal) {
68 this.rangeState.selecting = false; 68 this.rangeState.selecting = false;
69 this.markRange(newVal); 69 this.markRange(newVal);
70 - // todo 待验证  
71 this.$emit('on-pick', { 70 this.$emit('on-pick', {
72 minDate: this.minDate, 71 minDate: this.minDate,
73 maxDate: this.maxDate 72 maxDate: this.maxDate
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @0a5c5f4
@@ -8,24 +8,28 @@ @@ -8,24 +8,28 @@
8 </div> 8 </div>
9 <div :class="[prefixCls + '-body']"> 9 <div :class="[prefixCls + '-body']">
10 <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> 10 <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
11 - <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'"> 11 + <div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
12 <span 12 <span
13 :class="iconBtnCls('prev', '-double')" 13 :class="iconBtnCls('prev', '-double')"
14 - @click="prevYear"><Icon type="ios-arrow-left"></Icon></span> 14 + @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
15 <span 15 <span
16 :class="iconBtnCls('prev')" 16 :class="iconBtnCls('prev')"
17 @click="prevMonth" 17 @click="prevMonth"
18 - v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> 18 + v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
19 <span 19 <span
20 :class="[datePrefixCls + '-header-label']" 20 :class="[datePrefixCls + '-header-label']"
21 - @click="showYearPicker">{{ leftYear }} 年</span> 21 + @click="showYearPicker('left')">{{ leftYearLabel }}</span>
22 <span 22 <span
23 :class="[datePrefixCls + '-header-label']" 23 :class="[datePrefixCls + '-header-label']"
24 - @click="showMonthPicker"  
25 - v-show="currentView === 'date'">{{ leftMonth + 1 }} 月</span> 24 + @click="showMonthPicker('left')"
  25 + v-show="leftCurrentView === 'date'">{{ leftMonth + 1 }} 月</span>
  26 + <span
  27 + :class="iconBtnCls('next', '-double')"
  28 + @click="nextYear('left')"
  29 + v-show="leftCurrentView === 'year' || leftCurrentView === 'month'"><Icon type="ios-arrow-right"></Icon></span>
26 </div> 30 </div>
27 <date-table 31 <date-table
28 - v-show="currentView === 'date'" 32 + v-show="leftCurrentView === 'date'"
29 :year="leftYear" 33 :year="leftYear"
30 :month="leftMonth" 34 :month="leftMonth"
31 :date="date" 35 :date="date"
@@ -36,26 +40,46 @@ @@ -36,26 +40,46 @@
36 :disabled-date="disabledDate" 40 :disabled-date="disabledDate"
37 @on-changerange="handleChangeRange" 41 @on-changerange="handleChangeRange"
38 @on-pick="handleRangePick"></date-table> 42 @on-pick="handleRangePick"></date-table>
  43 + <year-table
  44 + v-ref:left-year-table
  45 + v-show="leftCurrentView === 'year'"
  46 + :year="leftYear"
  47 + :date="date"
  48 + selection-mode="range"
  49 + :disabled-date="disabledDate"
  50 + @on-pick="handleLeftYearPick"></year-table>
  51 + <month-table
  52 + v-ref:left-month-table
  53 + v-show="leftCurrentView === 'month'"
  54 + :month="leftMonth"
  55 + :date="date"
  56 + selection-mode="range"
  57 + :disabled-date="disabledDate"
  58 + @on-pick="handleLeftMonthPick"></month-table>
39 </div> 59 </div>
40 <div :class="[prefixCls + '-content', prefixCls + '-content-right']"> 60 <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
41 - <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'"> 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>
42 <span 66 <span
43 :class="[datePrefixCls + '-header-label']" 67 :class="[datePrefixCls + '-header-label']"
44 - @click="showYearPicker">{{ rightYear }} 年</span> 68 + @click="showYearPicker('right')">{{ rightYearLabel }}</span>
45 <span 69 <span
46 :class="[datePrefixCls + '-header-label']" 70 :class="[datePrefixCls + '-header-label']"
47 - @click="showMonthPicker"  
48 - v-show="currentView === 'date'">{{ rightMonth + 1 }} 月</span> 71 + @click="showMonthPicker('right')"
  72 + v-show="rightCurrentView === 'date'">{{ rightMonth + 1 }} 月</span>
49 <span 73 <span
50 :class="iconBtnCls('next', '-double')" 74 :class="iconBtnCls('next', '-double')"
51 - @click="nextYear"><Icon type="ios-arrow-right"></Icon></span> 75 + @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
52 <span 76 <span
53 :class="iconBtnCls('next')" 77 :class="iconBtnCls('next')"
54 @click="nextMonth" 78 @click="nextMonth"
55 - v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span> 79 + v-show="rightCurrentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
56 </div> 80 </div>
57 <date-table 81 <date-table
58 - v-show="currentView === 'date'" 82 + v-show="rightCurrentView === 'date'"
59 :year="rightYear" 83 :year="rightYear"
60 :month="rightMonth" 84 :month="rightMonth"
61 :date="rightDate" 85 :date="rightDate"
@@ -66,6 +90,22 @@ @@ -66,6 +90,22 @@
66 :disabled-date="disabledDate" 90 :disabled-date="disabledDate"
67 @on-changerange="handleChangeRange" 91 @on-changerange="handleChangeRange"
68 @on-pick="handleRangePick"></date-table> 92 @on-pick="handleRangePick"></date-table>
  93 + <year-table
  94 + v-ref:right-year-table
  95 + v-show="rightCurrentView === 'year'"
  96 + :year="rightYear"
  97 + :date="rightDate"
  98 + selection-mode="range"
  99 + :disabled-date="disabledDate"
  100 + @on-pick="handleRightYearPick"></year-table>
  101 + <month-table
  102 + v-ref:right-month-table
  103 + v-show="rightCurrentView === 'month'"
  104 + :month="rightMonth"
  105 + :date="rightDate"
  106 + selection-mode="range"
  107 + :disabled-date="disabledDate"
  108 + @on-pick="handleRightMonthPick"></month-table>
69 </div> 109 </div>
70 </div> 110 </div>
71 </div> 111 </div>
@@ -73,7 +113,9 @@ @@ -73,7 +113,9 @@
73 <script> 113 <script>
74 import Icon from '../../icon/icon.vue'; 114 import Icon from '../../icon/icon.vue';
75 import DateTable from '../base/date-table.vue'; 115 import DateTable from '../base/date-table.vue';
76 - import { toDate } from '../util'; 116 + import YearTable from '../base/year-table.vue';
  117 + import MonthTable from '../base/month-table.vue';
  118 + import { toDate, prevMonth, nextMonth } from '../util';
77 119
78 import Mixin from './mixin'; 120 import Mixin from './mixin';
79 121
@@ -82,7 +124,7 @@ @@ -82,7 +124,7 @@
82 124
83 export default { 125 export default {
84 mixins: [Mixin], 126 mixins: [Mixin],
85 - components: { Icon, DateTable }, 127 + components: { Icon, DateTable, YearTable, MonthTable },
86 data () { 128 data () {
87 return { 129 return {
88 prefixCls: prefixCls, 130 prefixCls: prefixCls,
@@ -98,7 +140,8 @@ @@ -98,7 +140,8 @@
98 }, 140 },
99 showTime: false, 141 showTime: false,
100 disabledDate: '', 142 disabledDate: '',
101 - currentView: 'date', 143 + leftCurrentView: 'date',
  144 + rightCurrentView: 'date',
102 selectionMode: 'range' 145 selectionMode: 'range'
103 } 146 }
104 }, 147 },
@@ -115,12 +158,30 @@ @@ -115,12 +158,30 @@
115 leftYear() { 158 leftYear() {
116 return this.date.getFullYear(); 159 return this.date.getFullYear();
117 }, 160 },
  161 + leftYearLabel () {
  162 + const year = this.leftYear;
  163 + if (!year) return '';
  164 + if (this.leftCurrentView === 'year') {
  165 + const startYear = Math.floor(year / 10) * 10;
  166 + return `${startYear}年 - ${startYear + 9}年`;
  167 + }
  168 + return `${year}年`;
  169 + },
118 leftMonth() { 170 leftMonth() {
119 return this.date.getMonth(); 171 return this.date.getMonth();
120 }, 172 },
121 rightYear() { 173 rightYear() {
122 return this.rightDate.getFullYear(); 174 return this.rightDate.getFullYear();
123 }, 175 },
  176 + rightYearLabel () {
  177 + const year = this.rightYear;
  178 + if (!year) return '';
  179 + if (this.rightCurrentView === 'year') {
  180 + const startYear = Math.floor(year / 10) * 10;
  181 + return `${startYear}年 - ${startYear + 9}年`;
  182 + }
  183 + return `${year}年`;
  184 + },
124 rightMonth() { 185 rightMonth() {
125 return this.rightDate.getMonth(); 186 return this.rightDate.getMonth();
126 }, 187 },
@@ -147,7 +208,6 @@ @@ -147,7 +208,6 @@
147 this.minDate = newVal[0] ? toDate(newVal[0]) : null; 208 this.minDate = newVal[0] ? toDate(newVal[0]) : null;
148 this.maxDate = newVal[1] ? toDate(newVal[1]) : null; 209 this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
149 if (this.minDate) this.date = new Date(this.minDate); 210 if (this.minDate) this.date = new Date(this.minDate);
150 -// this.handleConfirm(true); // todo 稍后测试  
151 } 211 }
152 } 212 }
153 }, 213 },
@@ -157,23 +217,59 @@ @@ -157,23 +217,59 @@
157 this.maxDate = null; 217 this.maxDate = null;
158 this.handleConfirm(); 218 this.handleConfirm();
159 }, 219 },
160 - prevYear () {  
161 - 220 + prevYear (direction) {
  221 + if (this[`${direction}CurrentView`] === 'year') {
  222 + this.$refs[`${direction}YearTable`].prevTenYear();
  223 + } else {
  224 + const date = this.date;
  225 + date.setFullYear(date.getFullYear() - 1);
  226 + this.resetDate();
  227 + }
162 }, 228 },
163 - nextYear () {  
164 - 229 + nextYear (direction) {
  230 + if (this[`${direction}CurrentView`] === 'year') {
  231 + this.$refs[`${direction}YearTable`].nextTenYear();
  232 + } else {
  233 + const date = this.date;
  234 + date.setFullYear(date.getFullYear() + 1);
  235 + this.resetDate();
  236 + }
165 }, 237 },
166 prevMonth () { 238 prevMonth () {
167 - 239 + this.date = prevMonth(this.date);
168 }, 240 },
169 nextMonth () { 241 nextMonth () {
170 - 242 + this.date = nextMonth(this.date);
171 }, 243 },
172 - showYearPicker () {  
173 - 244 + handleLeftYearPick (year, close = true) {
  245 + this.handleYearPick(year, close, 'left');
  246 + },
  247 + handleRightYearPick (year, close = true) {
  248 + this.handleYearPick(year, close, 'right');
174 }, 249 },
175 - showMonthPicker () { 250 + handleYearPick (year, close, direction) {
  251 + this.date.setFullYear(year);
  252 + this.resetDate();
  253 + if (!close) return;
176 254
  255 + this[`${direction}CurrentView`] = 'month';
  256 + },
  257 + handleLeftMonthPick (month) {
  258 + this.handleMonthPick(month, 'left');
  259 + },
  260 + handleRightMonthPick (month) {
  261 + this.handleMonthPick(month, 'right');
  262 + },
  263 + handleMonthPick (month, direction) {
  264 + this.date.setMonth(month);
  265 + this[`${direction}CurrentView`] = 'date';
  266 + this.resetDate();
  267 + },
  268 + showYearPicker (direction) {
  269 + this[`${direction}CurrentView`] = 'year';
  270 + },
  271 + showMonthPicker (direction) {
  272 + this[`${direction}CurrentView`] = 'month';
177 }, 273 },
178 handleConfirm(visible) { 274 handleConfirm(visible) {
179 this.$emit('on-pick', [this.minDate, this.maxDate], visible); 275 this.$emit('on-pick', [this.minDate, this.maxDate], visible);
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @0a5c5f4
@@ -109,7 +109,7 @@ @@ -109,7 +109,7 @@
109 const startYear = Math.floor(year / 10) * 10; 109 const startYear = Math.floor(year / 10) * 10;
110 return `${startYear}年 - ${startYear + 9}年`; 110 return `${startYear}年 - ${startYear + 9}年`;
111 } 111 }
112 - return `${year}年` 112 + return `${year}年`;
113 } 113 }
114 }, 114 },
115 watch: { 115 watch: {
@@ -128,8 +128,17 @@ @@ -128,8 +128,17 @@
128 this.date = new Date(); 128 this.date = new Date();
129 this.$emit('on-pick', ''); 129 this.$emit('on-pick', '');
130 }, 130 },
131 - resetDate () {  
132 - this.date = new Date(this.date); 131 + resetView() {
  132 + if (this.selectionMode === 'month') {
  133 + this.currentView = 'month';
  134 + } else if (this.selectionMode === 'year') {
  135 + this.currentView = 'year';
  136 + } else {
  137 + this.currentView = 'date';
  138 + }
  139 +
  140 + this.year = this.date.getFullYear();
  141 + this.month = this.date.getMonth();
133 }, 142 },
134 prevYear () { 143 prevYear () {
135 if (this.currentView === 'year') { 144 if (this.currentView === 'year') {
src/components/date-picker/panel/mixin.js
  Show/Hide comments   View file @0a5c5f4
@@ -14,17 +14,8 @@ export default { @@ -14,17 +14,8 @@ export default {
14 if (shortcut.value) this.$emit('on-pick', shortcut.value()); 14 if (shortcut.value) this.$emit('on-pick', shortcut.value());
15 if (shortcut.onClick) shortcut.onClick(this); 15 if (shortcut.onClick) shortcut.onClick(this);
16 }, 16 },
17 - resetView() {  
18 - if (this.selectionMode === 'month') {  
19 - this.currentView = 'month';  
20 - } else if (this.selectionMode === 'year') {  
21 - this.currentView = 'year';  
22 - } else {  
23 - this.currentView = 'date';  
24 - }  
25 -  
26 - this.year = this.date.getFullYear();  
27 - this.month = this.date.getMonth(); 17 + resetDate () {
  18 + this.date = new Date(this.date);
28 } 19 }
29 } 20 }
30 } 21 }
31 \ No newline at end of file 22 \ No newline at end of file
test/routers/date.vue
  Show/Hide comments   View file @0a5c5f4
@@ -124,7 +124,7 @@ @@ -124,7 +124,7 @@
124 }, 124 },
125 setDate () { 125 setDate () {
126 // this.value = '2016-12-24' 126 // this.value = '2016-12-24'
127 -// this.value2 = ['2016-9-1', '2016-9-20'] 127 + this.value2 = ['2016-9-1', '2016-9-20']
128 } 128 }
129 } 129 }
130 } 130 }