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

update DatePicker

Browse source 
update DatePicker
This commit is contained in:
梁灏 2016-12-22 09:18:11 +08:00
parent 98ca354f13
commit 68e9b1003b
10 changed files with 67 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "0.9.11-rc-3",
"version": "0.9.11-rc-4",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

1
src/components/date-picker/base/date-table.vue
View file

@ -224,6 +224,7 @@
this.$emit('on-pick', newDate);
}
}
this.$emit('on-pick-click');
},
handleMouseMove (event) {
if (!this.rangeState.selecting) return;

1
src/components/date-picker/base/month-table.vue
View file

@ -67,6 +67,7 @@
this.$emit('on-pick', index);
}
this.$emit('on-pick-click');
}
}
}

1
src/components/date-picker/base/year-table.vue
View file

@ -73,6 +73,7 @@
this.$emit('on-pick', cell.text);
}
this.$emit('on-pick-click');
}
}
}

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

@ -39,7 +39,8 @@
selection-mode="range"
:disabled-date="disabledDate"
@on-changerange="handleChangeRange"
@on-pick="handleRangePick"></date-table>
@on-pick="handleRangePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:left-year-table
v-show="leftCurrentView === 'year'"
@ -47,7 +48,8 @@
:date="leftTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleLeftYearPick"></year-table>
@on-pick="handleLeftYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:left-month-table
v-show="leftCurrentView === 'month'"
@ -55,7 +57,8 @@
:date="leftTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleLeftMonthPick"></month-table>
@on-pick="handleLeftMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
<div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
@ -89,7 +92,8 @@
selection-mode="range"
:disabled-date="disabledDate"
@on-changerange="handleChangeRange"
@on-pick="handleRangePick"></date-table>
@on-pick="handleRangePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:right-year-table
v-show="rightCurrentView === 'year'"
@ -97,7 +101,8 @@
:date="rightTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleRightYearPick"></year-table>
@on-pick="handleRightYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:right-month-table
v-show="rightCurrentView === 'month'"
@ -105,7 +110,8 @@
:date="rightTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleRightMonthPick"></month-table>
@on-pick="handleRightMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<Confirm
v-if="confirm"

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

@ -39,7 +39,8 @@
:value="value"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleDatePick"></date-table>
@on-pick="handleDatePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:year-table
v-show="currentView === 'year'"
@ -47,7 +48,8 @@
:date="date"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleYearPick"></year-table>
@on-pick="handleYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:month-table
v-show="currentView === 'month'"
@ -55,7 +57,8 @@
:date="date"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleMonthPick"></month-table>
@on-pick="handleMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<Confirm
v-if="confirm"

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

@ -19,6 +19,9 @@ export default {
},
handlePickSuccess () {
this.$emit('on-pick-success');
},
handlePickClick () {
this.$emit('on-pick-click');
}
}
}

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

@ -181,11 +181,17 @@
type: String,
default: ''
},
align: {
// align: {
// validator (value) {
// return oneOf(value, ['left', 'center', 'right']);
// },
// default: 'left'
// },
placement: {
validator (value) {
return oneOf(value, ['left', 'center', 'right']);
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
},
default: 'left'
default: 'bottom-start'
},
options: {
type: Object
@ -197,7 +203,8 @@
showClose: false,
visible: false,
picker: null,
internalValue: ''
internalValue: '',
disableClickOutSide: false // fixed when click a date,trigger clickoutside to close picker
}
},
computed: {
@ -207,9 +214,9 @@
iconType () {
return this.showClose ? 'ios-close' : 'ios-calendar-outline';
},
placement () {
return PLACEMENT_MAP[this.align];
},
// placement () {
// return PLACEMENT_MAP[this.align];
// },
selectionMode() {
if (this.type === 'month') {
return 'month';
@ -251,7 +258,8 @@
},
methods: {
handleClose () {
this.visible = false;
if (!this.disableClickOutSide) this.visible = false;
this.disableClickOutSide = false;
},
handleFocus () {
if (this.readonly) return;
@ -361,6 +369,7 @@
// this.emitChange(this.value);
this.visible = false;
});
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
// todo $on('on-time-range')
}

36
test/routers/date.vue
View file

@ -1,36 +1,16 @@
<template>
<div style="margin: 50px">
<i-button @click="type = 'year'">year</i-button>
<i-button @click="type = 'month'">month</i-button>
<br>
<div style="margin: 50px;position: relative">
<Card>
<row>
<i-col span="8">
<!--<i-button @click="setDate">set date</i-button>-->
<date-picker
type="month"
style="width:200px"
placeholder="请选择日期"
:value.sync="value"
@on-change="change"
:confirm="false"
:options="options"
open
@on-open-change="change2">
</date-picker>
<i-col span="12">
<date-picker type="date" placeholder="选择日期" style="width: 200px;"></date-picker>
</i-col>
<i-col span="8">
<date-picker
type="daterange"
style="width:300px"
placeholder="请选择日期"
:value.sync="value2"
align="right"
:editable="true"
@on-change="change"
:confirm="true"
:options="options2"></date-picker>
<i-col span="12">
<date-picker type="daterange" placeholder="选择日期" style="width: 200px;"></date-picker>
</i-col>
</row>
fdsfs
</Card>
</div>
</template>
<script>

26
test/routers/dropdown.vue
View file

@ -1,28 +1,24 @@
<template>
<Dropdown @on-visible-change="v">
<Dropdown trigger="click">
<a href="javascript:void(0)">
下拉菜单
北京小吃
<Icon type="arrow-down-b"></Icon>
</a>
<Dropdown-menu slot="list">
<Dropdown-item>驴打滚</Dropdown-item>
<Dropdown-item>炸酱面</Dropdown-item>
<Dropdown-item disabled>豆汁儿</Dropdown-item>
<Dropdown-item>冰糖葫芦</Dropdown-item>
<Dropdown-item divided>北京烤鸭</Dropdown-item>
<Dropdown-item>豆汁儿</Dropdown-item>
<Dropdown placement="right-start">
<Dropdown-item>
北京烤鸭
<Icon type="ios-arrow-right"></Icon>
</Dropdown-item>
<Dropdown-menu slot="list">
<Dropdown-item>挂炉烤鸭</Dropdown-item>
<Dropdown-item>焖炉烤鸭</Dropdown-item>
</Dropdown-menu>
</Dropdown>
<Dropdown style="margin-left: 20px">
<i-button type="primary">
下拉菜单
<Icon type="arrow-down-b"></Icon>
</i-button>
<Dropdown-menu slot="list">
<Dropdown-item>驴打滚</Dropdown-item>
<Dropdown-item>炸酱面</Dropdown-item>
<Dropdown-item disabled>豆汁儿</Dropdown-item>
<Dropdown-item>冰糖葫芦</Dropdown-item>
<Dropdown-item divided>北京烤鸭</Dropdown-item>
</Dropdown-menu>
</Dropdown>
</template>