Vue + el-date-picker日期时间控件实现今天昨天上周上一个月等功能
Posted 做猪呢,最重要的是开森啦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue + el-date-picker日期时间控件实现今天昨天上周上一个月等功能相关的知识,希望对你有一定的参考价值。
有时我们需要搜索对应时间段的内容,我们就可以用el-date-picker这个日期时间控件来实现
0. 整体代码:
【效果】:
【栗子代码】:
<template>
<div>
<el-col :span="10">
<el-row align="middle">
<el-col :span="4" ><label>时间范围:</label></el-col>
<el-col :span="20">
<el-date-picker v-model="dateSpan" type="datetimerange" :picker-options="pickerOptions"
:unlink-panels="true" range-separator="至" start-placeholder="开始时间"
size="mini" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-col>
</el-row>
</el-col>
<el-col :span="10">
<el-button @click="getSearch" size="min" >查询</el-button>
</el-col>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: "SideOne",
methods: {
getSearch () {
const startTime = this.dateSpan.length !==0 ?this.dateSpan[0] : ''
const endTime = this.dateSpan.length !==0 ?this.dateSpan[1] : ''
console.log('startTime: ' + startTime)
console.log('endTime: ' + endTime)
}
},
data: function () {
return {
pickerOptions: {
shortcuts: [{
text: '今天',
onClick (picker) {
const start = new Date()
const end = new Date()
const startTime = moment(moment().startOf('day').valueOf())
const endTime = moment(moment().endOf('day').valueOf())
start.setTime(startTime)
end.setTime(endTime)
picker.$emit('pick',[start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const start = new Date()
const end = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick',[start, end])
}
}]
},
dateSpan: ''
}
}
}
</script>
</style>
1. 要点讲解:
绑定
:picker-options=“pickerOptions”
,在pickerOptions中定义快捷时间段
【今天】:
需要引入moment组件,
import moment from ‘moment’
const startTime = moment(moment().startOf('day').valueOf())
const endTime = moment(moment().endOf('day').valueOf())
【昨天】:
const startTime = moment(moment().subtract(1,'day').startOf('day').valueOf())
const endTime = moment(moment().subtract(1,'day').endOf('day').valueOf())
【近七天】:
const startTime = moment(moment().subtract(6,'day').startOf('day').valueOf())
const endTime = moment(moment().endOf('day').valueOf())
【上个月】:
const startTime = moment(moment().subtract(1,'month').startOf('month').valueOf())
const endTime = moment(moment().subtract(1,'month').endOf('month').valueOf())
上述的时间段是以0点-24点为基准的,下列这些方式,是以当前时间来计算的时间段
【最近一周】:
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
【最近一个月】:
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
【最近三个月】:
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 3)
选取的时间段可以通过dateSpan来获取,如栗子代码中:
getSearch () {
const startTime = this.dateSpan.length !==0 ?this.dateSpan[0] : ''
const endTime = this.dateSpan.length !==0 ?this.dateSpan[1] : ''
console.log('startTime: ' + startTime)
console.log('endTime: ' + endTime)
},
以上是关于Vue + el-date-picker日期时间控件实现今天昨天上周上一个月等功能的主要内容,如果未能解决你的问题,请参考以下文章
Vue + el-date-picker日期时间控件实现今天昨天上周上一个月等功能
el-date-picker日期选择器 ——[Vue warn]: Error in render: "TypeError: date.getFullYear is not a functi