other / 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 67 if (newVal && !oldVal) {
68 68 this.rangeState.selecting = false;
69 69 this.markRange(newVal);
70   - // todo 待验证
71 70 this.$emit('on-pick', {
72 71 minDate: this.minDate,
73 72 maxDate: this.maxDate
... ...
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @0a5c5f4
... ... @@ -8,24 +8,28 @@
8 8 </div>
9 9 <div :class="[prefixCls + '-body']">
10 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 12 <span
13 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 15 <span
16 16 :class="iconBtnCls('prev')"
17 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 19 <span
20 20 :class="[datePrefixCls + '-header-label']"
21   - @click="showYearPicker">{{ leftYear }} 年</span>
  21 + @click="showYearPicker('left')">{{ leftYearLabel }}</span>
22 22 <span
23 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 30 </div>
27 31 <date-table
28   - v-show="currentView === 'date'"
  32 + v-show="leftCurrentView === 'date'"
29 33 :year="leftYear"
30 34 :month="leftMonth"
31 35 :date="date"
... ... @@ -36,26 +40,46 @@
36 40 :disabled-date="disabledDate"
37 41 @on-changerange="handleChangeRange"
38 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 59 </div>
40 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 66 <span
43 67 :class="[datePrefixCls + '-header-label']"
44   - @click="showYearPicker">{{ rightYear }} 年</span>
  68 + @click="showYearPicker('right')">{{ rightYearLabel }}</span>
45 69 <span
46 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 73 <span
50 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 76 <span
53 77 :class="iconBtnCls('next')"
54 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 80 </div>
57 81 <date-table
58   - v-show="currentView === 'date'"
  82 + v-show="rightCurrentView === 'date'"
59 83 :year="rightYear"
60 84 :month="rightMonth"
61 85 :date="rightDate"
... ... @@ -66,6 +90,22 @@
66 90 :disabled-date="disabledDate"
67 91 @on-changerange="handleChangeRange"
68 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 109 </div>
70 110 </div>
71 111 </div>
... ... @@ -73,7 +113,9 @@
73 113 <script>
74 114 import Icon from '../../icon/icon.vue';
75 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 120 import Mixin from './mixin';
79 121  
... ... @@ -82,7 +124,7 @@
82 124  
83 125 export default {
84 126 mixins: [Mixin],
85   - components: { Icon, DateTable },
  127 + components: { Icon, DateTable, YearTable, MonthTable },
86 128 data () {
87 129 return {
88 130 prefixCls: prefixCls,
... ... @@ -98,7 +140,8 @@
98 140 },
99 141 showTime: false,
100 142 disabledDate: '',
101   - currentView: 'date',
  143 + leftCurrentView: 'date',
  144 + rightCurrentView: 'date',
102 145 selectionMode: 'range'
103 146 }
104 147 },
... ... @@ -115,12 +158,30 @@
115 158 leftYear() {
116 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 170 leftMonth() {
119 171 return this.date.getMonth();
120 172 },
121 173 rightYear() {
122 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 185 rightMonth() {
125 186 return this.rightDate.getMonth();
126 187 },
... ... @@ -147,7 +208,6 @@
147 208 this.minDate = newVal[0] ? toDate(newVal[0]) : null;
148 209 this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
149 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 217 this.maxDate = null;
158 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 238 prevMonth () {
167   -
  239 + this.date = prevMonth(this.date);
168 240 },
169 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 274 handleConfirm(visible) {
179 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 109 const startYear = Math.floor(year / 10) * 10;
110 110 return `${startYear}年 - ${startYear + 9}年`;
111 111 }
112   - return `${year}年`
  112 + return `${year}年`;
113 113 }
114 114 },
115 115 watch: {
... ... @@ -128,8 +128,17 @@
128 128 this.date = new Date();
129 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 143 prevYear () {
135 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 14 if (shortcut.value) this.$emit('on-pick', shortcut.value());
15 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 22 \ No newline at end of file
... ...
test/routers/date.vue
  Show/Hide comments   View file @0a5c5f4
... ... @@ -124,7 +124,7 @@
124 124 },
125 125 setDate () {
126 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 }
... ...