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