chenhaodong / mew-iview

Commit 2dc277134958684e77fbe5cdef9a8f297af3491f

Authored by 梁灏
1 parent 36931442

update DateTimePicker 

update DateTimePicker
Showing 8 changed files with 92 additions and 36 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/confirm.vue
  Show/Hide comments   View file @2dc2771
1 <template> 1 <template>
2 <div :class="[prefixCls + '-confirm']"> 2 <div :class="[prefixCls + '-confirm']">
3 - <span v-if="showTime" @click="handleToggleTime"> 3 + <span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
4 <template v-if="isTime">选择日期</template> 4 <template v-if="isTime">选择日期</template>
5 <template v-else>选择时间</template> 5 <template v-else>选择时间</template>
6 </span> 6 </span>
@@ -17,13 +17,21 @@ @@ -17,13 +17,21 @@
17 components: { iButton }, 17 components: { iButton },
18 props: { 18 props: {
19 showTime: false, 19 showTime: false,
20 - isTime: false 20 + isTime: false,
  21 + timeDisabled: false
21 }, 22 },
22 data () { 23 data () {
23 return { 24 return {
24 prefixCls: prefixCls 25 prefixCls: prefixCls
25 }; 26 };
26 }, 27 },
  28 + computed: {
  29 + timeClasses () {
  30 + return {
  31 + [`${prefixCls}-confirm-time-disabled`]: this.timeDisabled
  32 + };
  33 + }
  34 + },
27 methods: { 35 methods: {
28 handleClear () { 36 handleClear () {
29 this.$emit('on-pick-clear'); 37 this.$emit('on-pick-clear');
@@ -32,6 +40,7 @@ @@ -32,6 +40,7 @@
32 this.$emit('on-pick-success'); 40 this.$emit('on-pick-success');
33 }, 41 },
34 handleToggleTime () { 42 handleToggleTime () {
  43 + if (this.timeDisabled) return;
35 this.$emit('on-pick-toggle-time'); 44 this.$emit('on-pick-toggle-time');
36 } 45 }
37 } 46 }
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @2dc2771
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div> 7 @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
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']" v-show="!isTime">
11 <div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'"> 11 <div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
12 <span 12 <span
13 :class="iconBtnCls('prev', '-double')" 13 :class="iconBtnCls('prev', '-double')"
@@ -60,7 +60,7 @@ @@ -60,7 +60,7 @@
60 @on-pick="handleLeftMonthPick" 60 @on-pick="handleLeftMonthPick"
61 @on-pick-click="handlePickClick"></month-table> 61 @on-pick-click="handlePickClick"></month-table>
62 </div> 62 </div>
63 - <div :class="[prefixCls + '-content', prefixCls + '-content-right']"> 63 + <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
64 <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'"> 64 <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
65 <span 65 <span
66 :class="iconBtnCls('prev', '-double')" 66 :class="iconBtnCls('prev', '-double')"
@@ -113,8 +113,18 @@ @@ -113,8 +113,18 @@
113 @on-pick="handleRightMonthPick" 113 @on-pick="handleRightMonthPick"
114 @on-pick-click="handlePickClick"></month-table> 114 @on-pick-click="handlePickClick"></month-table>
115 </div> 115 </div>
  116 + <div :class="[prefixCls + '-content']" v-show="isTime">
  117 + <time-picker
  118 + v-ref:time-picker
  119 + v-show="isTime"
  120 + @on-pick="handleTimePick"></time-picker>
  121 + </div>
116 <Confirm 122 <Confirm
117 v-if="confirm" 123 v-if="confirm"
  124 + :show-time="showTime"
  125 + :is-time="isTime"
  126 + :time-disabled="timeDisabled"
  127 + @on-pick-toggle-time="handleToggleTime"
118 @on-pick-clear="handlePickClear" 128 @on-pick-clear="handlePickClear"
119 @on-pick-success="handlePickSuccess"></Confirm> 129 @on-pick-success="handlePickSuccess"></Confirm>
120 </div> 130 </div>
@@ -125,6 +135,7 @@ @@ -125,6 +135,7 @@
125 import DateTable from '../base/date-table.vue'; 135 import DateTable from '../base/date-table.vue';
126 import YearTable from '../base/year-table.vue'; 136 import YearTable from '../base/year-table.vue';
127 import MonthTable from '../base/month-table.vue'; 137 import MonthTable from '../base/month-table.vue';
  138 + import TimePicker from './time-range.vue';
128 import Confirm from '../base/confirm.vue'; 139 import Confirm from '../base/confirm.vue';
129 import { toDate, prevMonth, nextMonth, initTimeDate } from '../util'; 140 import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
130 141
@@ -135,7 +146,7 @@ @@ -135,7 +146,7 @@
135 146
136 export default { 147 export default {
137 mixins: [Mixin], 148 mixins: [Mixin],
138 - components: { Icon, DateTable, YearTable, MonthTable, Confirm }, 149 + components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
139 data () { 150 data () {
140 return { 151 return {
141 prefixCls: prefixCls, 152 prefixCls: prefixCls,
@@ -156,7 +167,9 @@ @@ -156,7 +167,9 @@
156 rightCurrentView: 'date', 167 rightCurrentView: 'date',
157 selectionMode: 'range', 168 selectionMode: 'range',
158 leftTableYear: null, 169 leftTableYear: null,
159 - rightTableYear: null 170 + rightTableYear: null,
  171 + isTime: false,
  172 + format: 'yyyy-MM-dd'
160 }; 173 };
161 }, 174 },
162 computed: { 175 computed: {
@@ -231,6 +244,9 @@ @@ -231,6 +244,9 @@
231 newDate.setMonth(month + 1); 244 newDate.setMonth(month + 1);
232 } 245 }
233 return newDate; 246 return newDate;
  247 + },
  248 + timeDisabled () {
  249 + return !(this.minDate && this.maxDate);
234 } 250 }
235 }, 251 },
236 watch: { 252 watch: {
@@ -243,6 +259,19 @@ @@ -243,6 +259,19 @@
243 this.maxDate = newVal[1] ? toDate(newVal[1]) : null; 259 this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
244 if (this.minDate) this.date = new Date(this.minDate); 260 if (this.minDate) this.date = new Date(this.minDate);
245 } 261 }
  262 + if (this.showTime) this.$refs.timePicker.value = newVal;
  263 + },
  264 + minDate (val) {
  265 + if (this.showTime) this.$refs.timePicker.date = val;
  266 + },
  267 + maxDate (val) {
  268 + if (this.showTime) this.$refs.timePicker.dateEnd = val;
  269 + },
  270 + format (val) {
  271 + if (this.showTime) this.$refs.timePicker.format = val;
  272 + },
  273 + isTime (val) {
  274 + if (val) this.$refs.timePicker.updateScroll();
246 } 275 }
247 }, 276 },
248 methods: { 277 methods: {
@@ -256,6 +285,7 @@ @@ -256,6 +285,7 @@
256 this.maxDate = null; 285 this.maxDate = null;
257 this.date = new Date(); 286 this.date = new Date();
258 this.handleConfirm(); 287 this.handleConfirm();
  288 + if (this.showTime) this.$refs.timePicker.handleClear();
259 }, 289 },
260 resetView() { 290 resetView() {
261 this.leftCurrentView = 'date'; 291 this.leftCurrentView = 'date';
@@ -343,14 +373,32 @@ @@ -343,14 +373,32 @@
343 this.maxDate = val.maxDate; 373 this.maxDate = val.maxDate;
344 374
345 if (!close) return; 375 if (!close) return;
346 - if (!this.showTime) {  
347 - this.handleConfirm(false);  
348 - } 376 +// if (!this.showTime) {
  377 +// this.handleConfirm(false);
  378 +// }
  379 + this.handleConfirm(false);
349 }, 380 },
350 handleChangeRange (val) { 381 handleChangeRange (val) {
351 this.minDate = val.minDate; 382 this.minDate = val.minDate;
352 this.maxDate = val.maxDate; 383 this.maxDate = val.maxDate;
353 this.rangeState = val.rangeState; 384 this.rangeState = val.rangeState;
  385 + },
  386 + handleToggleTime () {
  387 + this.isTime = !this.isTime;
  388 + },
  389 + handleTimePick (date) {
  390 + this.minDate = date[0];
  391 + this.maxDate = date[1];
  392 + this.handleConfirm(false);
  393 + }
  394 + },
  395 + compiled () {
  396 + if (this.showTime) {
  397 + this.$refs.timePicker.date = this.minDate;
  398 + this.$refs.timePicker.dateEnd = this.maxDate;
  399 + this.$refs.timePicker.value = this.value;
  400 + this.$refs.timePicker.format = this.format;
  401 + this.$refs.timePicker.showDate = true;
354 } 402 }
355 } 403 }
356 }; 404 };
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @2dc2771
@@ -61,11 +61,8 @@ @@ -61,11 +61,8 @@
61 @on-pick-click="handlePickClick"></month-table> 61 @on-pick-click="handlePickClick"></month-table>
62 <time-picker 62 <time-picker
63 v-ref:time-picker 63 v-ref:time-picker
64 - v-show="currentView === 'time'"  
65 - :date="date"  
66 - :value="value"  
67 - :format="format"  
68 show-date 64 show-date
  65 + v-show="currentView === 'time'"
69 @on-pick="handleTimePick"></time-picker> 66 @on-pick="handleTimePick"></time-picker>
70 </div> 67 </div>
71 <Confirm 68 <Confirm
@@ -276,6 +273,7 @@ @@ -276,6 +273,7 @@
276 this.month = this.date.getMonth(); 273 this.month = this.date.getMonth();
277 } 274 }
278 if (this.showTime) { 275 if (this.showTime) {
  276 + // todo 这里可能有问题，并不能进入到这里，但不影响正常使用
279 this.$refs.timePicker.date = this.date; 277 this.$refs.timePicker.date = this.date;
280 this.$refs.timePicker.value = this.value; 278 this.$refs.timePicker.value = this.value;
281 this.$refs.timePicker.format = this.format; 279 this.$refs.timePicker.format = this.format;
src/components/date-picker/panel/time-range.vue
  Show/Hide comments   View file @2dc2771
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> 4 <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
5 <div :class="[timePrefixCls + '-header']">开始时间</div> 5 <div :class="[timePrefixCls + '-header']">开始时间</div>
6 <time-spinner 6 <time-spinner
  7 + v-ref:time-spinner
7 :show-seconds="showSeconds" 8 :show-seconds="showSeconds"
8 :hours="hours" 9 :hours="hours"
9 :minutes="minutes" 10 :minutes="minutes"
@@ -18,6 +19,7 @@ @@ -18,6 +19,7 @@
18 <div :class="[prefixCls + '-content', prefixCls + '-content-right']"> 19 <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
19 <div :class="[timePrefixCls + '-header']">结束时间</div> 20 <div :class="[timePrefixCls + '-header']">结束时间</div>
20 <time-spinner 21 <time-spinner
  22 + v-ref:time-spinner-end
21 :show-seconds="showSeconds" 23 :show-seconds="showSeconds"
22 :hours="hoursEnd" 24 :hours="hoursEnd"
23 :minutes="minutesEnd" 25 :minutes="minutesEnd"
@@ -170,6 +172,10 @@ @@ -170,6 +172,10 @@
170 }, 172 },
171 handleEndChange (date) { 173 handleEndChange (date) {
172 this.handleChange({}, date); 174 this.handleChange({}, date);
  175 + },
  176 + updateScroll () {
  177 + this.$refs.timeSpinner.updateScroll();
  178 + this.$refs.timeSpinnerEnd.updateScroll();
173 } 179 }
174 } 180 }
175 }; 181 };
src/components/date-picker/panel/time.vue
  Show/Hide comments   View file @2dc2771
@@ -37,31 +37,19 @@ @@ -37,31 +37,19 @@
37 export default { 37 export default {
38 mixins: [Mixin], 38 mixins: [Mixin],
39 components: { TimeSpinner, Confirm }, 39 components: { TimeSpinner, Confirm },
40 -// props: {  
41 -// date: {  
42 -// default () {  
43 -// return initTimeDate();  
44 -// }  
45 -// },  
46 -// value: {  
47 -// default: ''  
48 -// },  
49 -// showDate: {  
50 -// type: Boolean,  
51 -// default: false  
52 -// },  
53 -// format: {  
54 -// type: String,  
55 -// default: 'HH:mm:ss'  
56 -// }  
57 -// }, 40 + props: {
  41 + showDate: {
  42 + type: Boolean,
  43 + default: false
  44 + }
  45 + },
58 data () { 46 data () {
59 return { 47 return {
60 prefixCls: prefixCls, 48 prefixCls: prefixCls,
61 timePrefixCls: timePrefixCls, 49 timePrefixCls: timePrefixCls,
62 date: initTimeDate(), 50 date: initTimeDate(),
63 value: '', 51 value: '',
64 - showDate: false, 52 +// showDate: false,
65 format: 'HH:mm:ss', 53 format: 'HH:mm:ss',
66 hours: '', 54 hours: '',
67 minutes: '', 55 minutes: '',
src/styles/components/date-picker.less
  Show/Hide comments   View file @2dc2771
@@ -258,5 +258,9 @@ @@ -258,5 +258,9 @@
258 color: @link-active-color; 258 color: @link-active-color;
259 } 259 }
260 } 260 }
  261 + & > span&-time-disabled{
  262 + color: @btn-disable-color;
  263 + cursor: @cursor-disabled;
  264 + }
261 } 265 }
262 } 266 }
263 \ No newline at end of file 267 \ No newline at end of file
src/styles/components/time-picker.less
  Show/Hide comments   View file @2dc2771
@@ -93,7 +93,8 @@ @@ -93,7 +93,8 @@
93 top: 31px; 93 top: 31px;
94 bottom: 0; 94 bottom: 0;
95 right: -2px; 95 right: -2px;
96 - background: @border-color-split 96 + background: @border-color-split;
  97 + z-index: 1;
97 } 98 }
98 99
99 &-right{ 100 &-right{
test/routers/date.vue
  Show/Hide comments   View file @2dc2771
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 <template> 6 <template>
7 <row> 7 <row>
8 <i-col span="12"> 8 <i-col span="12">
  9 + <Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker>
9 <Time-picker :value="value" type="time" placeholder="选择时间" style="width: 168px"></Time-picker> 10 <Time-picker :value="value" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
10 </i-col> 11 </i-col>
11 <!--<i-col span="12">--> 12 <!--<i-col span="12">-->
@@ -24,7 +25,7 @@ @@ -24,7 +25,7 @@
24 <!--style="width: 168px"></time-picker>--> 25 <!--style="width: 168px"></time-picker>-->
25 <!--</i-col>--> 26 <!--</i-col>-->
26 <i-col span="12"> 27 <i-col span="12">
27 - <Date-picker :value="value1" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px" @on-change="c"></Date-picker> 28 + <Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker>
28 <!--<time-picker--> 29 <!--<time-picker-->
29 <!--:value="value2"--> 30 <!--:value="value2"-->
30 <!--type="timerange"--> 31 <!--type="timerange"-->
@@ -44,11 +45,12 @@ @@ -44,11 +45,12 @@
44 data () { 45 data () {
45 return { 46 return {
46 // value: '2016-12-12 03:03:03', 47 // value: '2016-12-12 03:03:03',
47 - value1: '2015-12-12 09:41', 48 + value1: '2015-12-12 09:41:00',
48 value: '03:12:01', 49 value: '03:12:01',
49 value2: ['08:40:00', '09:40:00'], 50 value2: ['08:40:00', '09:40:00'],
50 // value2: [new Date(), new Date()], 51 // value2: [new Date(), new Date()],
51 - value3: ['2016-12-01', '2016-12-25'] 52 + value3: ['2016-12-01', '2016-12-25'],
  53 + val4: ['2016-12-01 09:41:12', '2016-12-25 12:23:32']
52 } 54 }
53 }, 55 },
54 methods: { 56 methods: {