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