前言:
官网上只有最近一周、最近一个月和最近三个月快捷选项,但项目有要求,需要换成最近10分钟、最近30分钟、最近一小时、最近一天和最近一周,找了一些资料,写好了记录一下,以便下次使用。
1.首先是日期时间范围控件(change事件和pickerOptions里的getTime方法和官网类似就不写了)
<el-form-item label="操作时间">
<el-date-picker
v-model="selectForm.exec_time"
type="datetimerange"
align="right"
unlink-panels
start-placeholder="开始时间"
end-placeholder="结束时间"
size="small"
@change="getMountimes"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
2.接下来就写一下pickerOptions对象里的改写代码:
(newTimeNyrHour1 是filters文件中返回当前时间的正确格式的方法)
pickerOptions:{
shortcuts:[
{
text:'最近10分钟',
onClick(picker){
var date = new Date()
var min = date.getMinutes()
date.setMinutes(min-10)
date.setMilliseconds(0)
let date1 = new Date()
date1.setMilliseconds(0)
picker.$emit('pick',[newTimeNyrHour1(date),newTimeNyrHour1(date1)])
}
},
{
text:'最近30分钟',
onClick(picker){
var date = new Date()
var min = date.getMinutes()
date.setMinutes(min-30)
date.setMilliseconds(0)
let date1 = new Date()
date1.setMilliseconds(0)
picker.$emit('pick',[newTimeNyrHour1(date),newTimeNyrHour1(date1)])
}
},
{
text:'最近一小时',
onClick(picker){
var date = new Date()
var min = date.getMinutes()
date.setMinutes(min-60)
date.setMilliseconds(0)
let date1 = new Date()
date1.setMilliseconds(0)
picker.$emit('pick',[newTimeNyrHour1(date),newTimeNyrHour1(date1)])
}
},
{
text:'最近一天',
onClick(picker){
var date = new Date()
var min = date.getMinutes()
date.setMinutes(min-1440)
date.setMilliseconds(0)
let date1 = new Date()
date1.setMilliseconds(0)
picker.$emit('pick',[newTimeNyrHour1(date),newTimeNyrHour1(date1)])
}
},
{
text:'最近一周',
onClick(picker){
const end = new Date()
const start = new Date()
start.setTime(start.getTime()-3600*1000*24*7)
picker.$emit('pick',[newTimeNyrHour1(date),newTimeNyrHour1(date1)])
}
},
]
}