drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

DatePicker add confirm prop

Browse source 
DatePicker add confirm prop
This commit is contained in:
梁灏 2016-12-20 13:48:39 +08:00
parent fe44201b46
commit b9041a0df9
7 changed files with 83 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/date-picker/base/confirm.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<div :class="[prefixCls + '-confirm']">
<i-button size="small" type="text" @click="handleClear">清空</i-button>
<i-button size="small" type="primary" @click="handleSuccess">确定</i-button>
</div>
</template>
<script>
import iButton from '../../button/button.vue';
const prefixCls = 'ivu-picker';
export default {
components: { iButton },
data () {
return {
prefixCls: prefixCls
}
},
methods: {
handleClear () {
this.$emit('on-pick-clear');
},
handleSuccess () {
this.$emit('on-pick-success');
}
}
}
</script>

8
src/components/date-picker/panel/date-range.vue
View file

@ -107,6 +107,10 @@
:disabled-date="disabledDate"
@on-pick="handleRightMonthPick"></month-table>
</div>
<Confirm
v-if="confirm"
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
</div>
</template>
@ -115,6 +119,7 @@
import DateTable from '../base/date-table.vue';
import YearTable from '../base/year-table.vue';
import MonthTable from '../base/month-table.vue';
import Confirm from '../base/confirm.vue';
import { toDate, prevMonth, nextMonth } from '../util';
import Mixin from './mixin';
@ -124,7 +129,7 @@
export default {
mixins: [Mixin],
components: { Icon, DateTable, YearTable, MonthTable },
components: { Icon, DateTable, YearTable, MonthTable, Confirm },
data () {
return {
prefixCls: prefixCls,
@ -134,6 +139,7 @@
value: '',
minDate: '',
maxDate: '',
confirm: false,
rangeState: {
endDate: null,
selecting: false

11
src/components/date-picker/panel/date.vue
View file

@ -57,6 +57,10 @@
:disabled-date="disabledDate"
@on-pick="handleMonthPick"></month-table>
</div>
<Confirm
v-if="confirm"
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
</div>
</template>
@ -65,6 +69,7 @@
import DateTable from '../base/date-table.vue';
import YearTable from '../base/year-table.vue';
import MonthTable from '../base/month-table.vue';
import Confirm from '../base/confirm.vue';
import { formatDate, parseDate } from '../util';
import Mixin from './mixin';
@ -74,7 +79,7 @@
export default {
mixins: [Mixin],
components: { Icon, DateTable, YearTable, MonthTable },
components: { Icon, DateTable, YearTable, MonthTable, Confirm },
data () {
return {
prefixCls: prefixCls,
@ -85,12 +90,10 @@
value: '',
showTime: false,
selectionMode: 'day',
visible: false,
disabledDate: '',
year: null,
month: null,
showWeekNumber: false,
timePickerVisible: false
confirm: false
}
},
computed: {

6
src/components/date-picker/panel/mixin.js
View file

@ -13,6 +13,12 @@ export default {
handleShortcutClick (shortcut) {
if (shortcut.value) this.$emit('on-pick', shortcut.value());
if (shortcut.onClick) shortcut.onClick(this);
},
handlePickClear () {
this.$emit('on-pick-clear');
},
handlePickSuccess () {
this.$emit('on-pick-success');
}
}
}

22
src/components/date-picker/picker.vue
View file

@ -162,6 +162,10 @@
type: Boolean,
default: true
},
confirm: {
type: Boolean,
default: false
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
@ -315,14 +319,19 @@
},
handleIconClick () {
if (!this.showClose) return;
this.handleClear();
},
handleClear () {
this.visible = false;
this.internalValue = '';
this.value = '';
this.emitChange(this.value);
},
showPicker () {
if (!this.picker) {
this.picker = new Vue(this.panel).$mount(this.$els.picker);
this.picker.value = this.internalValue;
this.picker.confirm = this.confirm;
this.picker.selectionMode = this.selectionMode;
if (this.format) this.picker.format = this.format;
@ -332,13 +341,22 @@
}
this.picker.$on('on-pick', (date, visible = false) => {
if (!this.confirm) this.visible = visible;
this.emitChange(date);
this.value = date;
this.visible = visible;
this.picker.value = date;
this.picker.resetView && this.picker.resetView();
});
this.picker.$on('on-pick-clear', () => {
this.handleClear();
});
this.picker.$on('on-pick-success', () => {
this.emitChange(this.value);
this.visible = false;
});
// todo $on('on-time-range')
}
if (this.internalValue instanceof Date) {
@ -349,7 +367,7 @@
this.picker.resetView && this.picker.resetView();
},
emitChange (date) {
const format = this.format || DEFAULT_FORMATS[type];
const format = this.format || DEFAULT_FORMATS[this.type];
const formatter = (
TYPE_VALUE_RESOLVER_MAP[this.type] ||
TYPE_VALUE_RESOLVER_MAP['default']

7
src/styles/components/date-picker.less
View file

@ -238,4 +238,11 @@
float: left;
}
}
&-confirm{
border-top: 1px solid @border-color-split;
text-align: right;
padding: 8px;
clear: both;
}
}

14
test/routers/date.vue
View file

@ -1,17 +1,19 @@
<template>
<div style="margin: 50px">
<i-button @click="setDate">change date</i-button>
<i-button @click="type = 'year'">year</i-button>
<i-button @click="type = 'month'">month</i-button>
<br>
<row>
<i-col span="8">
<!--<i-button @click="setDate">set date</i-button>-->
<date-picker
:type="type"
style="width:200px"
placeholder="请选择日期"
:value.sync="value"
:options="options"
@on-change="change"
:format="format"
:confirm="true"
:options="options"
@on-open-change="change2"></date-picker>
</i-col>
<i-col span="8">
@ -22,9 +24,8 @@
:value.sync="value2"
align="right"
:editable="true"
:format="format"
@on-change="change"
:clearable="false"
:confirm="true"
:options="options2"></date-picker>
</i-col>
</row>
@ -35,6 +36,7 @@
data () {
return {
// value: new Date(),
type: 'date',
value: '2016-12-25',
value2: ['2016-12-17', '2017-01-05'],
options2: {
@ -130,7 +132,7 @@
}
]
},
format: 'yyyy-MM-dd'
format: 'yyyy-MM',
}
},
computed: {},