|
@@ -1,13 +1,26 @@
|
|
|
<template>
|
|
|
- <a-range-picker
|
|
|
- style="width:100%"
|
|
|
- :value="date"
|
|
|
- show-time
|
|
|
- :disabledDate="disabledDate"
|
|
|
- :format="dateFormat"
|
|
|
- @change="dateChange"
|
|
|
- @calendarChange="dateCalendarChange"
|
|
|
- :placeholder="['开始时间', '结束时间']" />
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <a-date-picker
|
|
|
+ :size="size"
|
|
|
+ v-model="startValue"
|
|
|
+ :disabled-date="disabledStartDate"
|
|
|
+ :show-time="false"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ placeholder="开始时间"
|
|
|
+ @openChange="handleStartOpenChange"
|
|
|
+ />
|
|
|
+ <span> 至 </span>
|
|
|
+ <a-date-picker
|
|
|
+ :size="size"
|
|
|
+ v-model="endValue"
|
|
|
+ :disabled-date="disabledEndDate"
|
|
|
+ :show-time="false"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ placeholder="结束时间"
|
|
|
+ :open="endOpen"
|
|
|
+ @openChange="handleEndOpenChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import moment from 'moment'
|
|
@@ -18,44 +31,76 @@ export default {
|
|
|
default: () => {
|
|
|
return []
|
|
|
}
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ type: String,
|
|
|
+ default: 'default'
|
|
|
+ },
|
|
|
+ showTime: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
}
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- date: this.value,
|
|
|
- dateFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
- selectPriceDate: ''
|
|
|
+ startValue: this.value[0],
|
|
|
+ endValue: this.value[1],
|
|
|
+ endOpen: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ startValue (val) {
|
|
|
+ this.changeInput()
|
|
|
+ },
|
|
|
+ endValue (val) {
|
|
|
+ this.changeInput()
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- // 不可选日期
|
|
|
- disabledDate (current) {
|
|
|
- // 最早可倒推选择两年数据,最晚为今天
|
|
|
- const minYearVs = moment().subtract(2, 'years') // 两年前 负值
|
|
|
+ disabledStartDate (startValue) {
|
|
|
+ const endValue = this.endValue
|
|
|
+ const oMinYearVs = moment(endValue, 'YYYY-MM-DD').subtract(1, 'years')
|
|
|
const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
|
- // 限制最多只能查一年区间的数据
|
|
|
- if (this.selectPriceDate) {
|
|
|
- const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD HH:mm:ss').subtract(1, 'years') // 当前选中开始日期前推一年
|
|
|
- const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD HH:mm:ss').add(1, 'years') // 当前选中开始日期后推一年
|
|
|
- // 判断两个时间段是否相差m天 第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
|
|
|
- const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
|
|
|
- const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
|
|
|
- return current && current < beginDate || current && current > endDate
|
|
|
+ if (endValue) {
|
|
|
+ return startValue.valueOf() < oMinYearVs.valueOf() || startValue.valueOf() > maxYearVs.valueOf()
|
|
|
} else {
|
|
|
- return current && current > maxYearVs || current && current < minYearVs
|
|
|
+ return startValue.valueOf() > maxYearVs.valueOf()
|
|
|
}
|
|
|
},
|
|
|
- // 日期 change
|
|
|
- dateChange (date, dateStrings) {
|
|
|
- this.selectPriceDate = ''
|
|
|
- this.date = date
|
|
|
- this.$emit('change', dateStrings)
|
|
|
+ disabledEndDate (endValue) {
|
|
|
+ const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
|
+ return endValue && endValue.valueOf() > maxYearVs.valueOf()
|
|
|
},
|
|
|
- dateCalendarChange (date, dateStrings) {
|
|
|
- this.selectPriceDate = date[0]
|
|
|
+ handleStartOpenChange (open) {
|
|
|
+ if (!open) {
|
|
|
+ this.endOpen = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleEndOpenChange (open) {
|
|
|
+ this.endOpen = open
|
|
|
+ },
|
|
|
+ changeInput () {
|
|
|
+ const startValue = this.startValue
|
|
|
+ const endValue = this.endValue
|
|
|
+ console.log(startValue, endValue)
|
|
|
+ let dateStrings = [startValue, endValue]
|
|
|
+ if (!dateStrings[0] || !dateStrings[1]) {
|
|
|
+ dateStrings = []
|
|
|
+ } else {
|
|
|
+ if (this.showTime) {
|
|
|
+ dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00')
|
|
|
+ dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59')
|
|
|
+ } else {
|
|
|
+ dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD')
|
|
|
+ dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$emit('change', dateStrings)
|
|
|
},
|
|
|
resetDate (val) {
|
|
|
- this.date = val || []
|
|
|
+ this.startValue = val && val[0] || ''
|
|
|
+ this.endValue = val && val[1] || ''
|
|
|
+ this.$emit('change', [])
|
|
|
}
|
|
|
}
|
|
|
}
|