update DatePicker
update DatePicker
This commit is contained in:
parent
13be443453
commit
2533a192dd
4 changed files with 76 additions and 7 deletions
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-body-wrapper']">
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts">
|
||||
<div
|
||||
:class="[prefixCls + '-shortcut']"
|
||||
|
@ -91,6 +91,14 @@
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
||||
}
|
||||
]
|
||||
},
|
||||
yearLabel () {
|
||||
const year = this.year;
|
||||
if (!year) return '';
|
||||
|
@ -122,7 +130,8 @@
|
|||
this.$emit('on-pick', '');
|
||||
},
|
||||
handleShortcutClick (shortcut) {
|
||||
|
||||
if (shortcut.value) this.$emit('on-pick', shortcut.value());
|
||||
if (shortcut.onClick) shortcut.onClick(this);
|
||||
},
|
||||
iconBtnCls (direction, type = '') {
|
||||
return [
|
||||
|
|
|
@ -454,14 +454,17 @@
|
|||
let data = this.makeData();
|
||||
let sortType = 'normal';
|
||||
let sortIndex = -1;
|
||||
let isCustom = false;
|
||||
|
||||
for (let i = 0; i < this.cloneColumns.length; i++) {
|
||||
if (this.cloneColumns[i]._sortType !== 'normal') {
|
||||
sortType = this.cloneColumns[i]._sortType;
|
||||
sortIndex = i;
|
||||
isCustom = this.cloneColumns[i].sortable === 'custom';
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (sortType !== 'normal') data = this.sortData(data, sortType, sortIndex);
|
||||
if (sortType !== 'normal' && !isCustom) data = this.sortData(data, sortType, sortIndex);
|
||||
return data;
|
||||
},
|
||||
makeDataWithFilter () {
|
||||
|
|
|
@ -172,5 +172,25 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -3,6 +3,7 @@
|
|||
<br>
|
||||
<row>
|
||||
<i-col span="4">
|
||||
<!--<i-button @click="setDate">set date</i-button>-->
|
||||
<date-picker
|
||||
style="width:200px"
|
||||
placeholder="请选择日期"
|
||||
|
@ -25,17 +26,50 @@
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: new Date(),
|
||||
// value: '',
|
||||
// value: new Date(),
|
||||
value: '',
|
||||
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();
|
||||
},
|
||||
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: {},
|
||||
|
@ -45,6 +79,9 @@
|
|||
},
|
||||
change2 (s) {
|
||||
// console.log(s)
|
||||
},
|
||||
setDate () {
|
||||
this.value = '2016-12-24'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue