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",
|
"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",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue