update DatePicker

update DatePicker
This commit is contained in:
梁灏 2016-12-16 14:15:11 +08:00
parent 13be443453
commit 2533a192dd
4 changed files with 76 additions and 7 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="[prefixCls + '-body-wrapper']"> <div :class="classes">
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts"> <div :class="[prefixCls + '-sidebar']" v-if="shortcuts">
<div <div
:class="[prefixCls + '-shortcut']" :class="[prefixCls + '-shortcut']"
@ -91,6 +91,14 @@
} }
}, },
computed: { computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
{
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
}
]
},
yearLabel () { yearLabel () {
const year = this.year; const year = this.year;
if (!year) return ''; if (!year) return '';
@ -122,7 +130,8 @@
this.$emit('on-pick', ''); this.$emit('on-pick', '');
}, },
handleShortcutClick (shortcut) { handleShortcutClick (shortcut) {
if (shortcut.value) this.$emit('on-pick', shortcut.value());
if (shortcut.onClick) shortcut.onClick(this);
}, },
iconBtnCls (direction, type = '') { iconBtnCls (direction, type = '') {
return [ return [

View file

@ -454,14 +454,17 @@
let data = this.makeData(); let data = this.makeData();
let sortType = 'normal'; let sortType = 'normal';
let sortIndex = -1; let sortIndex = -1;
let isCustom = false;
for (let i = 0; i < this.cloneColumns.length; i++) { for (let i = 0; i < this.cloneColumns.length; i++) {
if (this.cloneColumns[i]._sortType !== 'normal') { if (this.cloneColumns[i]._sortType !== 'normal') {
sortType = this.cloneColumns[i]._sortType; sortType = this.cloneColumns[i]._sortType;
sortIndex = i; sortIndex = i;
isCustom = this.cloneColumns[i].sortable === 'custom';
break; break;
} }
} }
if (sortType !== 'normal') data = this.sortData(data, sortType, sortIndex); if (sortType !== 'normal' && !isCustom) data = this.sortData(data, sortType, sortIndex);
return data; return data;
}, },
makeDataWithFilter () { makeDataWithFilter () {

View file

@ -172,5 +172,25 @@
font-size: 14px; font-size: 14px;
} }
} }
&-body-wrapper&-with-sidebar{
padding-left: 92px;
}
&-sidebar{
width: 92px;
float: left;
margin-left: -92px;
position: absolute;
top: 0;
bottom: 0;
background: @border-color-split;
border-radius: @border-radius-small 0 0 @border-radius-small;
}
&-shortcut{
}
&-body{
float: left;
}
} }
} }

View file

@ -3,6 +3,7 @@
<br> <br>
<row> <row>
<i-col span="4"> <i-col span="4">
<!--<i-button @click="setDate">set date</i-button>-->
<date-picker <date-picker
style="width:200px" style="width:200px"
placeholder="请选择日期" placeholder="请选择日期"
@ -25,17 +26,50 @@
export default { export default {
data () { data () {
return { return {
value: new Date(), // value: new Date(),
// value: '', value: '',
options: { options: {
disabledDate(time) { disabledDate(time) {
// console.log(time) // console.log(time)
// return time.getFullYear() < 2016; // return time.getFullYear() < 2016;
return time.getTime() < Date.now() - 8.64e7; return time.getTime() < Date.now() - 8.64e7;
// return time && time.valueOf() < Date.now(); // return time && time.valueOf() < Date.now();
} },
shortcuts: [
{
text: '今天',
value () {
return new Date();
},
onClick () {
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月dd日' format: 'yyyy-MM-dd'
} }
}, },
computed: {}, computed: {},
@ -45,6 +79,9 @@
}, },
change2 (s) { change2 (s) {
// console.log(s) // console.log(s)
},
setDate () {
this.value = '2016-12-24'
} }
} }
} }