效果展示
1.组件
<template>
<el-date-picker
@change="changeTime"
v-model="finleTime"
type="datetimerange"
:picker-options="pickerOptions"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
:clearable="false"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="left"
>
</el-date-picker>
</template>
<script>
import { getMyDate } from '@/utils/utils.js'
export default {
name: 'filterDateTime',
props: {
start: String,
end: String,
pickerOptions: Object
},
data() {
return {
finleTime: []
}
},
created() {
this.resetTime()
},
methods: {
resetTime() {
const date = new Date()
const newtime = new Date(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate())
const start = getMyDate(newtime.getTime() - 3600 * 1000 * 24 * 6)
const end = getMyDate(newtime.getTime() + 3600 * 1000 * 24 - 1000)
this.$emit('update:start', start)
this.$emit('update:end', end)
this.finleTime = [start, end]
},
// 选择时间
changeTime(value) {
this.$emit('update:start', this.finleTime[0])
this.$emit('update:end', this.finleTime[1])
this.$emit('change', this.finleTime)
}
}
}
</script>
2.方法
<SFilterDateTime
:start.sync="filters.startTime"
:end.sync="filters.endTime"
:defaultValue="false"
:picker-options="formPickerOptions"
:distance="0"
:default-time="['00:00:00', '23:59:59']"
format="MM-dd HH:mm"
></SFilterDateTime>
data() {
const timeShortCuts = TIME_LIST.filter((item) => !['近31天'].includes(item.text)).map((item) => {
const obj = {}
obj.text = item.text
const [start, end] = item.value
obj.onClick = (picker) => {
picker.$emit('pick', [`${start} 00:00:00`, `${end} 23:59:59`])
}
return obj
})
return {
formPickerOptions: {
shortcuts: [...timeShortCuts]
}
}
3,时间范围定义
import dayjs from 'dayjs'
const updateLocale = require('dayjs/plugin/updateLocale')
const quarterOfYear = require('dayjs/plugin/quarterOfYear')
dayjs.extend(updateLocale)
dayjs.extend(quarterOfYear)
dayjs.updateLocale('en', {
weekStart: 1
})
export const TIME_LIST = [
{
text: '近31天',
value: [
dayjs()
.subtract(30, 'day')
.format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
]
},
{
text: '近30天',
value: [
dayjs()
.subtract(29, 'day')
.format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
]
},
{
text: '今天',
value: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
},
{
text: '昨天',
value: [
dayjs()
.subtract(1, 'day')
.format('YYYY-MM-DD'),
dayjs()
.subtract(1, 'day')
.format('YYYY-MM-DD')
]
},
{
text: '近3天',
value: [
dayjs()
.subtract(2, 'day')
.format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
]
},
{
text: '近7天',
value: [
dayjs()
.subtract(6, 'day')
.format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
]
},
{
text: '本周',
value: [
dayjs()
.startOf('week')
.format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
]
},
{
text: '本月',
value: [
dayjs()
.startOf('month')
.format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
]
},
{
text: '本季度',
value: [
dayjs()
.startOf('quarter')
.format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
]
}
]