|
@@ -4,22 +4,43 @@
|
|
:size="size"
|
|
:size="size"
|
|
v-model="startValue"
|
|
v-model="startValue"
|
|
:disabled-date="disabledStartDate"
|
|
:disabled-date="disabledStartDate"
|
|
- :show-time="false"
|
|
|
|
- format="YYYY-MM-DD"
|
|
|
|
|
|
+ :show-time="showTime"
|
|
|
|
+ :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
|
|
placeholder="开始时间"
|
|
placeholder="开始时间"
|
|
|
|
+ :open="startOpen"
|
|
@openChange="handleStartOpenChange"
|
|
@openChange="handleStartOpenChange"
|
|
- />
|
|
|
|
|
|
+ @panelChange="handleStartPanelChange"
|
|
|
|
+ :showToday="false"
|
|
|
|
+ >
|
|
|
|
+ <div slot="renderExtraFooter">
|
|
|
|
+ <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
|
|
|
|
+ <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
|
|
|
|
+ <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
|
|
|
|
+ <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
|
|
|
|
+ <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </a-date-picker>
|
|
<span> 至 </span>
|
|
<span> 至 </span>
|
|
<a-date-picker
|
|
<a-date-picker
|
|
:size="size"
|
|
:size="size"
|
|
v-model="endValue"
|
|
v-model="endValue"
|
|
:disabled-date="disabledEndDate"
|
|
:disabled-date="disabledEndDate"
|
|
- :show-time="false"
|
|
|
|
- format="YYYY-MM-DD"
|
|
|
|
|
|
+ :show-time="showTime"
|
|
|
|
+ :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
|
|
placeholder="结束时间"
|
|
placeholder="结束时间"
|
|
:open="endOpen"
|
|
:open="endOpen"
|
|
@openChange="handleEndOpenChange"
|
|
@openChange="handleEndOpenChange"
|
|
- />
|
|
|
|
|
|
+ @panelChange="handleEndPanelChange"
|
|
|
|
+ :showToday="false"
|
|
|
|
+ >
|
|
|
|
+ <div slot="renderExtraFooter">
|
|
|
|
+ <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
|
|
|
|
+ <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
|
|
|
|
+ <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
|
|
|
|
+ <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
|
|
|
|
+ <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </a-date-picker>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
@@ -38,14 +59,22 @@ export default {
|
|
},
|
|
},
|
|
showTime: {
|
|
showTime: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
- default: true
|
|
|
|
|
|
+ default: false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
startValue: this.value[0],
|
|
startValue: this.value[0],
|
|
endValue: this.value[1],
|
|
endValue: this.value[1],
|
|
- endOpen: false
|
|
|
|
|
|
+ endOpen: false,
|
|
|
|
+ startOpen: false,
|
|
|
|
+ ranges: {
|
|
|
|
+ 'date1': [moment(), moment()],
|
|
|
|
+ 'date2': [moment().subtract(1, 'months'), moment()],
|
|
|
|
+ 'date3': [moment().startOf('month'), moment()],
|
|
|
|
+ 'date4': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')],
|
|
|
|
+ 'date5': [moment().subtract(1, 'years'), moment()]
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
@@ -57,28 +86,49 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ setVal (key) {
|
|
|
|
+ this.startValue = this.ranges[key][0]
|
|
|
|
+ this.endValue = this.ranges[key][1]
|
|
|
|
+ this.startOpen = false
|
|
|
|
+ this.endOpen = false
|
|
|
|
+ },
|
|
disabledStartDate (startValue) {
|
|
disabledStartDate (startValue) {
|
|
const endValue = this.endValue
|
|
const endValue = this.endValue
|
|
- const oMinYearVs = moment(endValue, 'YYYY-MM-DD').subtract(1, 'years')
|
|
|
|
const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
if (endValue) {
|
|
if (endValue) {
|
|
- return startValue.valueOf() < oMinYearVs.valueOf() || startValue.valueOf() > maxYearVs.valueOf()
|
|
|
|
- } else {
|
|
|
|
- return startValue.valueOf() > maxYearVs.valueOf()
|
|
|
|
|
|
+ if (!this.startValue) {
|
|
|
|
+ return startValue.valueOf() > moment(endValue, 'YYYY-MM-DD').add(1, 'days').valueOf() || startValue.valueOf() > maxYearVs.valueOf()
|
|
|
|
+ }
|
|
|
|
+ return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() > maxYearVs.valueOf()
|
|
}
|
|
}
|
|
|
|
+ return startValue.valueOf() > maxYearVs.valueOf()
|
|
},
|
|
},
|
|
disabledEndDate (endValue) {
|
|
disabledEndDate (endValue) {
|
|
|
|
+ const startValue = this.startValue
|
|
const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
- return endValue && endValue.valueOf() > maxYearVs.valueOf()
|
|
|
|
|
|
+ if (startValue) {
|
|
|
|
+ return startValue.valueOf() > endValue.valueOf() || endValue.valueOf() > maxYearVs.valueOf()
|
|
|
|
+ }
|
|
|
|
+ return endValue.valueOf() > maxYearVs.valueOf()
|
|
},
|
|
},
|
|
handleStartOpenChange (open) {
|
|
handleStartOpenChange (open) {
|
|
- if (!open) {
|
|
|
|
|
|
+ if (!open && !this.endValue) {
|
|
this.endOpen = true
|
|
this.endOpen = true
|
|
}
|
|
}
|
|
|
|
+ this.startOpen = open
|
|
},
|
|
},
|
|
handleEndOpenChange (open) {
|
|
handleEndOpenChange (open) {
|
|
|
|
+ if (!open && !this.startValue) {
|
|
|
|
+ this.startOpen = true
|
|
|
|
+ }
|
|
this.endOpen = open
|
|
this.endOpen = open
|
|
},
|
|
},
|
|
|
|
+ handleStartPanelChange (v) {
|
|
|
|
+ console.log(v)
|
|
|
|
+ },
|
|
|
|
+ handleEndPanelChange (v) {
|
|
|
|
+ console.log(v)
|
|
|
|
+ },
|
|
changeInput () {
|
|
changeInput () {
|
|
const startValue = this.startValue
|
|
const startValue = this.startValue
|
|
const endValue = this.endValue
|
|
const endValue = this.endValue
|
|
@@ -87,12 +137,12 @@ export default {
|
|
if (!dateStrings[0] || !dateStrings[1]) {
|
|
if (!dateStrings[0] || !dateStrings[1]) {
|
|
dateStrings = []
|
|
dateStrings = []
|
|
} else {
|
|
} else {
|
|
- if (this.showTime) {
|
|
|
|
|
|
+ if (!this.showTime) {
|
|
dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00')
|
|
dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00')
|
|
dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59')
|
|
dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59')
|
|
} else {
|
|
} else {
|
|
- dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD')
|
|
|
|
- dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD')
|
|
|
|
|
|
+ dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD hh:mm:ss')
|
|
|
|
+ dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD hh:mm:ss')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.$emit('change', dateStrings)
|
|
this.$emit('change', dateStrings)
|