update DatePicker
update DatePicker
This commit is contained in:
梁灏
parent
68e9b1003b
commit
d20fe0eeb7
3 changed files with 45 additions and 145 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "0.9.11-rc-4",
|
||||
"version": "0.9.11-rc-5",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
:icon="iconType"></i-input>
|
||||
</slot>
|
||||
</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>
|
||||
</Drop>
|
||||
</div>
|
||||
|
|
@ -135,12 +135,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
const PLACEMENT_MAP = {
|
||||
left: 'bottom-start',
|
||||
center: 'bottom-center',
|
||||
right: 'bottom-end'
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { iInput, Drop },
|
||||
directives: { clickoutside },
|
||||
|
|
@ -181,12 +175,6 @@
|
|||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// align: {
|
||||
// validator (value) {
|
||||
// return oneOf(value, ['left', 'center', 'right']);
|
||||
// },
|
||||
// default: 'left'
|
||||
// },
|
||||
placement: {
|
||||
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']);
|
||||
|
|
@ -214,9 +202,13 @@
|
|||
iconType () {
|
||||
return this.showClose ? 'ios-close' : 'ios-calendar-outline';
|
||||
},
|
||||
// placement () {
|
||||
// return PLACEMENT_MAP[this.align];
|
||||
// },
|
||||
transition () {
|
||||
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
|
||||
return 'slide-up';
|
||||
} else {
|
||||
return 'slide-down';
|
||||
}
|
||||
},
|
||||
selectionMode() {
|
||||
if (this.type === 'month') {
|
||||
return 'month';
|
||||
|
|
@ -339,6 +331,7 @@
|
|||
this.visible = false;
|
||||
this.internalValue = '';
|
||||
this.value = '';
|
||||
this.$emit('on-clear');
|
||||
},
|
||||
showPicker () {
|
||||
if (!this.picker) {
|
||||
|
|
@ -368,6 +361,7 @@
|
|||
this.picker.$on('on-pick-success', () => {
|
||||
// this.emitChange(this.value);
|
||||
this.visible = false;
|
||||
this.$emit('on-ok');
|
||||
});
|
||||
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
|
||||
|
||||
|
|
@ -395,13 +389,11 @@
|
|||
if (val) {
|
||||
this.showPicker();
|
||||
this.$refs.drop.update();
|
||||
this.$emit('on-open-change', true);
|
||||
if (this.open === null) this.$emit('on-open-change', true);
|
||||
} else {
|
||||
if (this.picker) {
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
}
|
||||
if (this.picker) this.picker.resetView && this.picker.resetView();
|
||||
this.$refs.drop.destroy();
|
||||
this.$emit('on-open-change', false);
|
||||
if (this.open === null) this.$emit('on-open-change', false);
|
||||
}
|
||||
},
|
||||
internalValue(val) {
|
||||
|
|
@ -414,6 +406,14 @@
|
|||
handler (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 () {
|
||||
|
|
@ -422,9 +422,7 @@
|
|||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.open !== null) {
|
||||
this.visible = this.open;
|
||||
}
|
||||
if (this.open !== null) this.visible = this.open;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,134 +1,36 @@
|
|||
<template>
|
||||
<div style="margin: 50px;position: relative">
|
||||
<Card>
|
||||
<row>
|
||||
<i-col span="12">
|
||||
<date-picker type="date" placeholder="选择日期" style="width: 200px;"></date-picker>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<date-picker type="daterange" placeholder="选择日期" style="width: 200px;"></date-picker>
|
||||
</i-col>
|
||||
</row>
|
||||
fdsfs
|
||||
</Card>
|
||||
</div>
|
||||
<date-picker confirm :open="open" :value="value3" @on-change="handleChange" type="date" @on-open-change="c" @on-clear="clear" @on-ok="ok">
|
||||
<a href="javascript:void(0)" @click="handleClick">
|
||||
<Icon type="ios-calendar-outline"></Icon>
|
||||
<template v-if="value3 === ''">选择日期</template>
|
||||
<template v-else>{{ value3 }}</template>
|
||||
</a>
|
||||
</date-picker>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// value: new Date(),
|
||||
type: 'date',
|
||||
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',
|
||||
open: false,
|
||||
value3: ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
change (date) {
|
||||
console.log(date)
|
||||
handleClick () {
|
||||
this.open = !this.open;
|
||||
},
|
||||
change2 (s) {
|
||||
// console.log(s)
|
||||
handleChange (date) {
|
||||
this.value3 = date;
|
||||
},
|
||||
setDate () {
|
||||
// this.value = '2016-12-24'
|
||||
this.value2 = ['2016-9-1', '2016-9-20']
|
||||
c (s) {
|
||||
console.log(s)
|
||||
},
|
||||
clear (s) {
|
||||
console.log(s)
|
||||
},
|
||||
ok (s) {
|
||||
console.log(s)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue