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 15:08:05 +08:00
parent 68e9b1003b
commit d20fe0eeb7
3 changed files with 45 additions and 145 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", "name": "iview",
"version": "0.9.11-rc-4", "version": "0.9.11-rc-5",
"title": "iView", "title": "iView",
"description": "A high quality UI components Library with Vue.js", "description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com", "homepage": "http://www.iviewui.com",

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

@ -19,7 +19,7 @@
:icon="iconType"></i-input> :icon="iconType"></i-input>
</slot> </slot>
</div> </div>
<Drop v-show="opened" :placement="placement" transition="slide-up" v-ref:drop> <Drop v-show="opened" :placement="placement" :transition="transition" v-ref:drop>
<div v-el:picker></div> <div v-el:picker></div>
</Drop> </Drop>
</div> </div>
@ -135,12 +135,6 @@
} }
}; };
const PLACEMENT_MAP = {
left: 'bottom-start',
center: 'bottom-center',
right: 'bottom-end'
};
export default { export default {
components: { iInput, Drop }, components: { iInput, Drop },
directives: { clickoutside }, directives: { clickoutside },
@ -181,12 +175,6 @@
type: String, type: String,
default: '' default: ''
}, },
// align: {
// validator (value) {
// return oneOf(value, ['left', 'center', 'right']);
// },
// default: 'left'
// },
placement: { placement: {
validator (value) { validator (value) {
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']); return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
@ -214,9 +202,13 @@
iconType () { iconType () {
return this.showClose ? 'ios-close' : 'ios-calendar-outline'; return this.showClose ? 'ios-close' : 'ios-calendar-outline';
}, },
// placement () { transition () {
// return PLACEMENT_MAP[this.align]; if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
// }, return 'slide-up';
} else {
return 'slide-down';
}
},
selectionMode() { selectionMode() {
if (this.type === 'month') { if (this.type === 'month') {
return 'month'; return 'month';
@ -339,6 +331,7 @@
this.visible = false; this.visible = false;
this.internalValue = ''; this.internalValue = '';
this.value = ''; this.value = '';
this.$emit('on-clear');
}, },
showPicker () { showPicker () {
if (!this.picker) { if (!this.picker) {
@ -368,6 +361,7 @@
this.picker.$on('on-pick-success', () => { this.picker.$on('on-pick-success', () => {
// this.emitChange(this.value); // this.emitChange(this.value);
this.visible = false; this.visible = false;
this.$emit('on-ok');
}); });
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true); this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
@ -395,13 +389,11 @@
if (val) { if (val) {
this.showPicker(); this.showPicker();
this.$refs.drop.update(); this.$refs.drop.update();
this.$emit('on-open-change', true); if (this.open === null) this.$emit('on-open-change', true);
} else { } else {
if (this.picker) { if (this.picker) this.picker.resetView && this.picker.resetView();
this.picker.resetView && this.picker.resetView();
}
this.$refs.drop.destroy(); this.$refs.drop.destroy();
this.$emit('on-open-change', false); if (this.open === null) this.$emit('on-open-change', false);
} }
}, },
internalValue(val) { internalValue(val) {
@ -414,6 +406,14 @@
handler (val) { handler (val) {
this.internalValue = val; this.internalValue = val;
} }
},
open (val) {
if (val === true) {
this.visible = val;
this.$emit('on-open-change', true);
} else if (val === false) {
this.$emit('on-open-change', false);
}
} }
}, },
beforeDestroy () { beforeDestroy () {
@ -422,9 +422,7 @@
} }
}, },
ready () { ready () {
if (this.open !== null) { if (this.open !== null) this.visible = this.open;
this.visible = this.open;
}
} }
} }
</script> </script>

140
test/routers/date.vue
View file

@ -1,133 +1,35 @@
<template> <template>
<div style="margin: 50px;position: relative"> <date-picker confirm :open="open" :value="value3" @on-change="handleChange" type="date" @on-open-change="c" @on-clear="clear" @on-ok="ok">
<Card> <a href="javascript:void(0)" @click="handleClick">
<row> <Icon type="ios-calendar-outline"></Icon>
<i-col span="12"> <template v-if="value3 === ''">选择日期</template>
<date-picker type="date" placeholder="选择日期" style="width: 200px;"></date-picker> <template v-else>{{ value3 }}</template>
</i-col> </a>
<i-col span="12"> </date-picker>
<date-picker type="daterange" placeholder="选择日期" style="width: 200px;"></date-picker>
</i-col>
</row>
fdsfs
</Card>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
// value: new Date(), open: false,
type: 'date', value3: ''
value: '2016-12-25',
value2: ['2016-12-17', '2017-01-05'],
options2: {
// disabledDate(time) {
//// console.log(time)
//// return time.getFullYear() < 2016;
//// return time.getTime() < Date.now() - 8.64e7;
//// return time && time.valueOf() < Date.now();
// if (time.getDate() === 22 || time.getDate() === 23) {
// return true;
// } else {
// return false;
// }
// },
shortcuts: [
{
text: '最近一周',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
onClick (picker) {
console.log('点击了最近一周');
}
},
{
text: '最近一个月',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
onClick () {
console.log('点击了最近一个月');
}
},
{
text: '最近三个月',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
onClick () {
console.log('点击了最近三个月');
}
}
]
},
options: {
disabledDate(time) {
// console.log(time)
// return time.getFullYear() < 2016;
return time.getTime() < Date.now() - 8.64e7;
// return time && time.valueOf() < Date.now();
},
shortcuts: [
{
text: '今天',
value () {
// return new Date();
return '1/2/19'
},
onClick (picker) {
console.log('点击了今天');
}
},
{
text: '昨天',
value () {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
},
onClick () {
console.log('点击了昨天');
}
},
{
text: '最近三个月',
value () {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
},
onClick () {
console.log('点击了一周前');
}
}
]
},
format: 'yyyy-MM',
} }
}, },
computed: {},
methods: { methods: {
change (date) { handleClick () {
console.log(date) this.open = !this.open;
}, },
change2 (s) { handleChange (date) {
// console.log(s) this.value3 = date;
}, },
setDate () { c (s) {
// this.value = '2016-12-24' console.log(s)
this.value2 = ['2016-9-1', '2016-9-20'] },
clear (s) {
console.log(s)
},
ok (s) {
console.log(s)
} }
} }
} }