<template>
<div>
<div class='time-title'>快速搜索</div>
<div class='k-select'>
<div class='k-sub'>
<span v-for='item of days' :class='{active: +daysIndex ===item.value}' @click='calcTime(item)'
:key='item.value'>
{{ item.name }}
</span>
</div>
</div>
<div class='xian'></div>
<div class='k-select' style='margin-top: 0'>
<div class='k-fiscal'>
<span v-for='item of fiscalAndNatural' :class='{active:+fiscalAndNaturalIndex===+item.index}'
@click='handleYear(item)'>
{{ item.name }}
</span>
<div>
<span v-for='item of years' :class='{active:+yearsIndex===+item.index}' @click='handleYearNum(item)'>
{{ item.name }}
</span>
</div>
</div>
</div>
<div class='time-title' style='margin-top: 0'>日期选择</div>
<div class='date-option'>
<div class='date-div'>
<i class='iconfont green'></i>
<div class='date-bg0' @click='showTwoDate(1)'>
{{ oneDate | dateformat }}
</div>
<div class='date-bg1'>至</div>
<div class='date-bg2' @click='showTwoDate(2)'>
{{ twoDate | dateformat }}
</div>
<span class='refresh green' @click='handleReset'></span>
</div>
<div class='btn-div' v-if='dateOneVisible === false && dateTwoVisible === false'>
<button class='cz' @click='handleReset'>重置</button>
<button class='qd' @click="$emit('dateConfirm', { oneDate, twoDate, yearType })">确定</button>
</div>
</div>
<van-datetime-picker
style='margin-top: 0.5rem'
v-if='dateOneVisible'
v-model='oneDate'
type='date'
:min-date='minDate'
:max-date='maxDate'
:item-height='`.7rem`'
:show-toolbar='false'
@confirm='onConfirm1'
@cancel='onCanceld'
@change='changeOne'
ref='van_picker'
>
<template #confirm> </template>
<template #cancel> </template>
<template #columns-top>
<!-- <div class='time-title'>快速搜索</div>-->
<!-- <div class='k-select'>-->
<!-- <span v-for='item of days' @click='calcTime(item.value)' :key='item.value'>-->
<!-- {{ item.name }}-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class='time-title'>日期选择</div>-->
<!-- <div class='time-line'>-->
<!-- <div class='y'></div>-->
<!-- <div class='m' @click='allYearOne'>-->
<!-- <span class='sl'>全年</span>-->
<!-- </div>-->
<!-- <div class='d' @click='allMonthOne'>-->
<!-- <span class='sl'>全月</span>-->
<!-- </div>-->
<!-- </div>-->
</template>
<template #columns-bottom>
<div class='bot-btn'>
<button class='cz' @click='dateOneVisible = false'>取消</button>
<button class='qd' @click='onConfirmNewOne'>确定</button>
</div>
</template>
</van-datetime-picker>
<van-datetime-picker
style='margin-top: 0.5rem'
v-if='dateTwoVisible'
v-model='twoDate'
type='date'
:min-date='minDate'
:max-date='maxDate'
:item-height='`.7rem`'
:show-toolbar='false'
@confirm='onConfirm2'
@cancel='onCanceld'
@change='changeTwo'
ref='van_picker2'
>
<template #confirm> </template>
<template #cancel> </template>
<template #columns-top></template>
<template #columns-bottom>
<div class='bot-btn'>
<button class='cz' @click='dateTwoVisible = false'>取消</button>
<button class='qd' @click='onConfirmNewTwo'>确定</button>
</div>
</template>
</van-datetime-picker>
</div>
</template>
<script>
import moment from 'moment'
import { Notify } from 'vant'
export default {
name: 'dateControl',
data() {
return {
dataType: '',
// 自然年 财年
fiscalAndNatural: [
{
index: 1,
name: '自然年'
},
{
index: 2,
name: '财年'
}
],
fiscalAndNaturalIndex: null,
years: [],
yearsIndex: null,
// 改变的日期
currentSelectTime: '',
oneDate: new Date(),
twoDate: new Date(),
// 最小日期
minDate: new Date(2018, 0, 1),
// 最大日期
maxDate: new Date(),
// 快捷时间选择
days: [
{
value: 1,
name: '近7天'
},
{
value: 2,
name: '近30天'
},
{
value: 3,
name: '近60天'
},
{
value: 4,
name: '近90天'
},
{
value: 5,
name: '上一月'
},
{
value: 6,
name: '上两月'
},
{
value: 7,
name: '当月'
},
{
value: 8,
name: '当日'
}
],
daysIndex: null,
dateOneV: false,
dateOneVisible: false,
dateTwoVisible: false,
oneTwoheight: '65%',
yearType: ''
}
},
watch: {
dateOneVisible(nv) {
if (nv === false) {
this.$emit('changeHeight', '65%')
}
},
dateTwoVisible(nv) {
if (nv === false) {
this.$emit('changeHeight', '65%')
}
}
},
methods: {
init() {
},
handleReset() {
this.twoDate = new Date()
this.oneDate = new Date()
this.dateOneV = false
this.oneTwoheight = '65%'
this.fiscalAndNaturalIndex = null
this.years = []
this.daysIndex = null
this.$emit('changeHeight', this.oneTwoheight)
},
handleYear(val) {
this.daysIndex = null
this.fiscalAndNaturalIndex = val.index
let year = moment(new Date()).format('YYYY')
this.years = []
for (let i = 0; i < 4; i++) {
this.years.push(
{
index: +year - i,
name: +year - i
}
)
}
this.handleYearNum(val)
},
handleYearNum(val) {
if (val.index === 1 || val.index === 2) {
if (this.yearsIndex === null) {
this.yearsIndex = this.years[0].index
}
// 财年的时候为2
if (+this.fiscalAndNaturalIndex === 2) {
this.yearType = '财年'
this.oneDate = new Date(+this.yearsIndex - 1, 7, 1)
this.twoDate = new Date(this.yearsIndex, 6, 31)
} else {
this.yearType = '自然年'
this.oneDate = new Date(this.yearsIndex, 0, 1)
this.twoDate = new Date(this.yearsIndex, 11, 31)
}
} else {
this.yearsIndex = val.index
// 财年的时候为2
if (+this.fiscalAndNaturalIndex === 2) {
this.yearType = '财年'
this.oneDate = new Date(+val.index - 1, 7, 1)
this.twoDate = new Date(val.index, 6, 31)
} else {
this.yearType = '自然年'
this.oneDate = new Date(val.index, 0, 1)
this.twoDate = new Date(val.index, 11, 31)
}
}
},
showTwoDate(val) {
if (+val === 1) {
sessionStorage.setItem('oneDate', this.oneDate)
this.dateOneVisible = true
this.dateTwoVisible = false
setTimeout(() => {
this.oneTwoheight = '85%'
this.$emit('changeHeight', this.oneTwoheight)
}, 30)
} else {
sessionStorage.setItem('twoDate', this.twoDate)
this.dateTwoVisible = true
this.dateOneVisible = false
setTimeout(() => {
this.oneTwoheight = '85%'
this.$emit('changeHeight', this.oneTwoheight)
}, 30)
}
},
// 选择全年 1
allYearOne() {
this.$nextTick(() => {
// console.log(this.$refs.van_picker.getPicker())
this.$refs.van_picker.getPicker().setColumnIndex([1], 0)
this.$refs.van_picker.getPicker().setColumnIndex([2], 0)
console.log(this.$refs.van_picker.getPicker().getValues())
let yearData = this.$refs.van_picker.getPicker().getValues()
this.oneDate = new Date(yearData[0], 0, 1)
this.twoDate = new Date(yearData[0], 11, 31)
sessionStorage.setItem('oneDate', this.oneDate)
sessionStorage.setItem('twoDate', this.twoDate)
this.dateOneVisible = false
this.dateOneV = false
this.checked = true
this.yearType = '自然年'
this.isCalendarYear = true
this.dataType = 8
})
},
// 选择全月 1
allMonthOne() {
this.$nextTick(() => {
// console.log(this.$refs.van_picker.getPicker())
this.$refs.van_picker.getPicker().setColumnIndex([1], 0)
this.$refs.van_picker.getPicker().setColumnIndex([2], 0)
console.log(this.$refs.van_picker.getPicker().getValues())
let yearData = this.$refs.van_picker.getPicker().getValues()
this.oneDate = new Date(yearData[0], +yearData[1] - 1, 1)
let day = this.getDuration(yearData[0], yearData[1])
let currentMonth = moment(this.oneDate).format('YYYYMM')
if (+currentMonth === +moment(new Date()).format('YYYYMM')) {
this.twoDate = new Date()
} else {
this.twoDate = new Date(yearData[0], +yearData[1] - 1, day)
}
sessionStorage.setItem('oneDate', this.oneDate)
sessionStorage.setItem('twoDate', this.twoDate)
this.dateOneVisible = false
this.dateOneV = false
this.checked = false
this.yearType = '自然年'
this.isCalendarYear = true
this.dataType = 7
})
},
// 选择全年 2
allYearTwo() {
this.$nextTick(() => {
// console.log(this.$refs.van_picker.getPicker())
this.$refs.van_picker.getPicker().setColumnIndex([1], 0)
this.$refs.van_picker.getPicker().setColumnIndex([2], 0)
console.log(this.$refs.van_picker2.getPicker().getValues())
let yearData = this.$refs.van_picker2.getPicker().getValues()
this.oneDate = new Date(yearData[0], 0, 1)
this.twoDate = new Date(yearData[0], 11, 31)
sessionStorage.setItem('oneDate', this.oneDate)
sessionStorage.setItem('twoDate', this.twoDate)
this.dateTwoVisible = false
this.checked = true
this.yearType = '自然年'
this.isCalendarYear = true
this.dataType = 8
})
},
// 选择全月 2
allMonthTwo() {
this.$nextTick(() => {
// console.log(this.$refs.van_picker.getPicker())
this.$refs.van_picker.getPicker().setColumnIndex([1], 0)
this.$refs.van_picker.getPicker().setColumnIndex([2], 0)
console.log(this.$refs.van_picker2.getPicker().getValues())
let yearData = this.$refs.van_picker2.getPicker().getValues()
this.oneDate = new Date(yearData[0], +yearData[1] - 1, 1)
let day = this.getDuration(yearData[0], yearData[1])
let currentMonth = moment(this.twoDate).format('YYYYMM')
if (+currentMonth === +moment(new Date()).format('YYYYMM')) {
this.twoDate = new Date()
} else {
this.twoDate = new Date(yearData[0], +yearData[1] - 1, day)
}
sessionStorage.setItem('oneDate', this.oneDate)
sessionStorage.setItem('twoDate', this.twoDate)
this.dateTwoVisible = false
this.checked = false
this.yearType = '自然年'
this.isCalendarYear = true
this.dataType = 7
})
},
calcTime(val) {
let that = this
that.daysIndex = val.value
that.fiscalAndNaturalIndex = null
that.years = []
let day
if (+val.value === 1) {
day = 7
that.oneDate = new Date(that.DaysAgo(day))
that.twoDate = new Date()
} else if (+val.value === 2) {
day = 30
that.oneDate = new Date(that.DaysAgo(day))
that.twoDate = new Date()
} else if (+val.value === 3) {
day = 60
that.oneDate = new Date(that.DaysAgo(day))
that.twoDate = new Date()
} else if (+val.value === 4) {
day = 90
that.oneDate = new Date(that.DaysAgo(day))
that.twoDate = new Date()
} else if (+val.value === 5) {
// 上一月
day = that.getDuration(new Date().getFullYear(), +new Date().getMonth())
that.oneDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 1, 1)
that.twoDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 1, day)
} else if (+val.value === 6) {
// 上两月
day = that.getDuration(new Date().getFullYear(), +new Date().getMonth() - 1)
that.oneDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 2, 1)
that.twoDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 2, day)
} else if (+val.value === 7) {
// 当月
that.twoDate = new Date()
that.oneDate = that.getMonthBegin(new Date().getFullYear(), new Date().getMonth() + 1)
} else if (+val.value === 8) {
// 今日
// that.oneDate = that.getMonthBegin(new Date().getFullYear(), 1)
that.oneDate = new Date()
that.twoDate = new Date()
}
that.yearType = '自然年'
that.dataType = val
that.dateOneVisible = false
that.dateOneV = false
that.dateTwoVisible = false
that.dateTwoV = false
that.init()
},
// 改变的值存入变量
changeOne(picker) {
this.newTime1 = new Date(picker.getValues()[0], +picker.getValues()[1] - 1, picker.getValues()[2])
},
changeTwo(picker) {
this.newTime2 = new Date(picker.getValues()[0], +picker.getValues()[1] - 1, picker.getValues()[2])
},
onCanceld() {
this.dateOneVisible = false
this.dateOneV = false
this.dateTwoVisible = false
},
// 中间方法调用插件方法，传递日期
onConfirmNewOne() {
this.onConfirm1(this.newTime1)
},
onConfirmNewTwo() {
this.onConfirm2(this.newTime2)
},
// 时间确定
onConfirm1(date) {
this.dataType = ''
if (!date) {
date = new Date()
}
let oneYear = moment(date).format('YYYY')
let twoYear = moment(this.twoDate).format('YYYY')
if (this.GetDayDiff(this.oneDate, this.twoDate) < 0) {
this.oneDate = sessionStorage.getItem('oneDate')
Notify({ type: 'warning', message: '起止时间不能晚于终止时间' })
return
}
if (this.isCalendarYear) {
if (oneYear === twoYear) {
console.log('第一个日期', this.oneDate)
console.log('第二个日期', this.twoDate)
this.oneDate = date
} else {
this.oneDate = sessionStorage.getItem('oneDate')
Notify({ type: 'warning', message: '不能跨年查询' })
}
} else {
this.oneDate = date
this.oneTwoheight = '30%'
this.dateOneVisible = false
this.dateOneV = false
this.dateTwoVisible = false
this.datetwoV = false
}
},
onConfirm2(date) {
this.dataType = ''
if (!date) {
date = new Date()
}
let oneYear = moment(this.oneDate).format('YYYY')
let twoYear = moment(date).format('YYYY')
if (this.GetDayDiff(this.oneDate, this.twoDate) < 0) {
this.twoDate = sessionStorage.getItem('twoDate')
Notify({ type: 'warning', message: '终止时间不能早于起止时间' })
return
}
if (this.isCalendarYear) {
if (oneYear === twoYear) {
console.log('第一个日期', this.oneDate)
console.log('第二个日期', this.twoDate)
this.twoDate = date
} else {
this.twoDate = sessionStorage.getItem('twoDate')
Notify({ type: 'warning', message: '不能跨年查询' })
}
} else {
this.twoDate = date
let one = this.getMonthBegin(new Date().getFullYear(), 1)
let two = this.getMonthEnd(new Date().getFullYear(), 2)
console.log(moment(one).format('YYYYMMDD'))
console.log(moment(two).format('YYYYMMDD'))
if (
moment(this.oneDate).isBetween(moment(one).format('YYYYMMDD'), moment(two).format('YYYYMMDD')) &&
moment(this.twoDate).isBetween(moment(one).format('YYYYMMDD'), moment(two).format('YYYYMMDD'))
) {
} else {
let day = this.countWeekDaysBetween(this.oneDate, this.twoDate)
this.cDays = day - 30
if (this.cDays < 0) {
this.cDays = 0
}
console.log(this.cDays)
}
this.oneTwoheight = '30%'
this.dateOneVisible = false
this.dateOneV = false
this.dateTwoVisible = false
this.datetwoV = false
}
this.getSupLevel2DimInfo()
},
// 自然月第1天
getMonthBegin(year, month) {
return new Date(year, month - 1, 1)
},
// 计算两个日期之间的相差多少天
GetDayDiff(date1, date2) {
return (date2 - date1) / (1000 * 3600 * 24)
},
// 多少天之前
DaysAgo(val) {
let d = new Date()
d.setDate(d.getDate() - val)
return d.toISOString().split('T')[0]
},
// 返回当月多少天
getDuration(year, month) {
let d = new Date(year, month, 0)
return d.getDate()
},
// 自然月最后一天
getMonthEnd(year, month) {
return new Date(year, month, 0)
},
countWeekDaysBetween(date1, date2) {
let result = (date2 - date1) / (1000 * 3600 * 24)
return result.toFixed(0)
},
// 获取二级分类
getSupLevel2DimInfo() {
// 取当前月份的最后一天和当前比较，如果不是当前最后一天，就取上月最后一天
function removeFalsy(arr) {
return arr.filter(Boolean)
}
}
},
mounted() {
}
}
</script>
<style lang='stylus' scoped>
.time-title
margin-top .2rem
padding .15rem
font-size .3rem
text-indent .2rem
.k-select
overflow hidden
font-size .26rem
.k-sub
margin-left .25rem
span
display inline-block
width 1.1rem
text-align center
padding .1rem .2rem
background #f4f4f4
margin-right .25rem
margin-top .25rem
border-radius .1rem
color #777
&.active
color #fff
background #0bb78e
.k-fiscal
margin-left .25rem
margin-bottom .25rem
span
display inline-block
width 1.1rem
text-align center
padding .1rem .2rem
background #f4f4f4
margin-right .25rem
margin-top .25rem
border-radius .1rem
color #777
&.active
color #fff
background #0bb78e
.xian
border-bottom: 1px dashed #dedede;
margin-top: .3rem
.time-line
display flex
text-align center
font-size .32rem
padding-top .15rem
padding-bottom .15rem
.y
flex 1
.m
flex 1
.sl
padding .15rem .35rem
border-radius 5px
.d
flex 1
.sl
padding .15rem .35rem
border-radius 5px
.bot-btn
overflow hidden
padding .15rem
text-align center
.cz, .qd
display inline-block
padding .15rem 1.3rem
color #fff
.cz
background #f4f4f4
color #333
border-radius .6rem 0 0 .6rem
.qd
background #0BB48C
border-radius 0 .6rem .6rem 0
.date-option
overflow hidden
.btn-div
overflow hidden
margin-top .35rem
padding .15rem
text-align center
.cz, .qd
display inline-block
padding .15rem 1.3rem
color #fff
.cz
background #f4f4f4
color #333
border-radius .6rem 0 0 .6rem
.qd
background #0BB48C
border-radius 0 .6rem .6rem 0
.date-div
display inline-block
background #fff
margin-left .4rem
margin-top .2rem
.date-bg0
display inline-block
text-align center
margin-left .25rem
padding .15rem .25rem
border-radius .1rem
background #F4F4F4
color #666
.date-bg1
display inline-block
margin-left .25rem
color #666
.date-bg2
display inline-block
text-align center
margin-left .25rem
padding .15rem .25rem
border-radius .1rem
background #F4F4F4
color #666
.refresh:before {
margin-left .25rem
content: '\27F2';
font-size .36rem
}
</style>
