chenhaodong / mew-iview

Commit b9041a0df909d517dcbe712196fec05c0dc81778

Authored by 梁灏
1 parent fe44201b

DatePicker add confirm prop 

DatePicker add confirm prop
Showing 7 changed files with 83 additions and 13 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/confirm.vue 0 → 100644
  Show/Hide comments   View file @b9041a0
  1 +<template>
  2 + <div :class="[prefixCls + '-confirm']">
  3 + <i-button size="small" type="text" @click="handleClear">清空</i-button>
  4 + <i-button size="small" type="primary" @click="handleSuccess">确定</i-button>
  5 + </div>
  6 +</template>
  7 +<script>
  8 + import iButton from '../../button/button.vue';
  9 +
  10 + const prefixCls = 'ivu-picker';
  11 +
  12 + export default {
  13 + components: { iButton },
  14 + data () {
  15 + return {
  16 + prefixCls: prefixCls
  17 + }
  18 + },
  19 + methods: {
  20 + handleClear () {
  21 + this.$emit('on-pick-clear');
  22 + },
  23 + handleSuccess () {
  24 + this.$emit('on-pick-success');
  25 + }
  26 + }
  27 + }
  28 +</script>
0 29 \ No newline at end of file
... ...
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @b9041a0
... ... @@ -107,6 +107,10 @@
107 107 :disabled-date="disabledDate"
108 108 @on-pick="handleRightMonthPick"></month-table>
109 109 </div>
  110 + <Confirm
  111 + v-if="confirm"
  112 + @on-pick-clear="handlePickClear"
  113 + @on-pick-success="handlePickSuccess"></Confirm>
110 114 </div>
111 115 </div>
112 116 </template>
... ... @@ -115,6 +119,7 @@
115 119 import DateTable from '../base/date-table.vue';
116 120 import YearTable from '../base/year-table.vue';
117 121 import MonthTable from '../base/month-table.vue';
  122 + import Confirm from '../base/confirm.vue';
118 123 import { toDate, prevMonth, nextMonth } from '../util';
119 124  
120 125 import Mixin from './mixin';
... ... @@ -124,7 +129,7 @@
124 129  
125 130 export default {
126 131 mixins: [Mixin],
127   - components: { Icon, DateTable, YearTable, MonthTable },
  132 + components: { Icon, DateTable, YearTable, MonthTable, Confirm },
128 133 data () {
129 134 return {
130 135 prefixCls: prefixCls,
... ... @@ -134,6 +139,7 @@
134 139 value: '',
135 140 minDate: '',
136 141 maxDate: '',
  142 + confirm: false,
137 143 rangeState: {
138 144 endDate: null,
139 145 selecting: false
... ...
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @b9041a0
... ... @@ -57,6 +57,10 @@
57 57 :disabled-date="disabledDate"
58 58 @on-pick="handleMonthPick"></month-table>
59 59 </div>
  60 + <Confirm
  61 + v-if="confirm"
  62 + @on-pick-clear="handlePickClear"
  63 + @on-pick-success="handlePickSuccess"></Confirm>
60 64 </div>
61 65 </div>
62 66 </template>
... ... @@ -65,6 +69,7 @@
65 69 import DateTable from '../base/date-table.vue';
66 70 import YearTable from '../base/year-table.vue';
67 71 import MonthTable from '../base/month-table.vue';
  72 + import Confirm from '../base/confirm.vue';
68 73 import { formatDate, parseDate } from '../util';
69 74  
70 75 import Mixin from './mixin';
... ... @@ -74,7 +79,7 @@
74 79  
75 80 export default {
76 81 mixins: [Mixin],
77   - components: { Icon, DateTable, YearTable, MonthTable },
  82 + components: { Icon, DateTable, YearTable, MonthTable, Confirm },
78 83 data () {
79 84 return {
80 85 prefixCls: prefixCls,
... ... @@ -85,12 +90,10 @@
85 90 value: '',
86 91 showTime: false,
87 92 selectionMode: 'day',
88   - visible: false,
89 93 disabledDate: '',
90 94 year: null,
91 95 month: null,
92   - showWeekNumber: false,
93   - timePickerVisible: false
  96 + confirm: false
94 97 }
95 98 },
96 99 computed: {
... ...
src/components/date-picker/panel/mixin.js
  Show/Hide comments   View file @b9041a0
... ... @@ -13,6 +13,12 @@ export default {
13 13 handleShortcutClick (shortcut) {
14 14 if (shortcut.value) this.$emit('on-pick', shortcut.value());
15 15 if (shortcut.onClick) shortcut.onClick(this);
  16 + },
  17 + handlePickClear () {
  18 + this.$emit('on-pick-clear');
  19 + },
  20 + handlePickSuccess () {
  21 + this.$emit('on-pick-success');
16 22 }
17 23 }
18 24 }
19 25 \ No newline at end of file
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @b9041a0
... ... @@ -162,6 +162,10 @@
162 162 type: Boolean,
163 163 default: true
164 164 },
  165 + confirm: {
  166 + type: Boolean,
  167 + default: false
  168 + },
165 169 size: {
166 170 validator (value) {
167 171 return oneOf(value, ['small', 'large']);
... ... @@ -315,14 +319,19 @@
315 319 },
316 320 handleIconClick () {
317 321 if (!this.showClose) return;
  322 + this.handleClear();
  323 + },
  324 + handleClear () {
318 325 this.visible = false;
319 326 this.internalValue = '';
320 327 this.value = '';
  328 + this.emitChange(this.value);
321 329 },
322 330 showPicker () {
323 331 if (!this.picker) {
324 332 this.picker = new Vue(this.panel).$mount(this.$els.picker);
325 333 this.picker.value = this.internalValue;
  334 + this.picker.confirm = this.confirm;
326 335 this.picker.selectionMode = this.selectionMode;
327 336 if (this.format) this.picker.format = this.format;
328 337  
... ... @@ -332,13 +341,22 @@
332 341 }
333 342  
334 343 this.picker.$on('on-pick', (date, visible = false) => {
  344 + if (!this.confirm) this.visible = visible;
  345 +
335 346 this.emitChange(date);
336 347 this.value = date;
337   - this.visible = visible;
338 348 this.picker.value = date;
339 349 this.picker.resetView && this.picker.resetView();
340 350 });
341 351  
  352 + this.picker.$on('on-pick-clear', () => {
  353 + this.handleClear();
  354 + });
  355 + this.picker.$on('on-pick-success', () => {
  356 + this.emitChange(this.value);
  357 + this.visible = false;
  358 + });
  359 +
342 360 // todo $on('on-time-range')
343 361 }
344 362 if (this.internalValue instanceof Date) {
... ... @@ -349,7 +367,7 @@
349 367 this.picker.resetView && this.picker.resetView();
350 368 },
351 369 emitChange (date) {
352   - const format = this.format || DEFAULT_FORMATS[type];
  370 + const format = this.format || DEFAULT_FORMATS[this.type];
353 371 const formatter = (
354 372 TYPE_VALUE_RESOLVER_MAP[this.type] ||
355 373 TYPE_VALUE_RESOLVER_MAP['default']
... ...
src/styles/components/date-picker.less
  Show/Hide comments   View file @b9041a0
... ... @@ -238,4 +238,11 @@
238 238 float: left;
239 239 }
240 240 }
  241 +
  242 + &-confirm{
  243 + border-top: 1px solid @border-color-split;
  244 + text-align: right;
  245 + padding: 8px;
  246 + clear: both;
  247 + }
241 248 }
242 249 \ No newline at end of file
... ...
test/routers/date.vue
  Show/Hide comments   View file @b9041a0
1 1 <template>
2 2 <div style="margin: 50px">
3   - <i-button @click="setDate">change date</i-button>
  3 + <i-button @click="type = 'year'">year</i-button>
  4 + <i-button @click="type = 'month'">month</i-button>
4 5 <br>
5 6 <row>
6 7 <i-col span="8">
7 8 <!--<i-button @click="setDate">set date</i-button>-->
8 9 <date-picker
  10 + :type="type"
9 11 style="width:200px"
10 12 placeholder="请选择日期"
11 13 :value.sync="value"
12   - :options="options"
13 14 @on-change="change"
14   - :format="format"
  15 + :confirm="true"
  16 + :options="options"
15 17 @on-open-change="change2"></date-picker>
16 18 </i-col>
17 19 <i-col span="8">
... ... @@ -22,9 +24,8 @@
22 24 :value.sync="value2"
23 25 align="right"
24 26 :editable="true"
25   - :format="format"
26 27 @on-change="change"
27   - :clearable="false"
  28 + :confirm="true"
28 29 :options="options2"></date-picker>
29 30 </i-col>
30 31 </row>
... ... @@ -35,6 +36,7 @@
35 36 data () {
36 37 return {
37 38 // value: new Date(),
  39 + type: 'date',
38 40 value: '2016-12-25',
39 41 value2: ['2016-12-17', '2017-01-05'],
40 42 options2: {
... ... @@ -130,7 +132,7 @@
130 132 }
131 133 ]
132 134 },
133   - format: 'yyyy-MM-dd'
  135 + format: 'yyyy-MM',
134 136 }
135 137 },
136 138 computed: {},
... ...