54.Vue+elementUI日期时间范围选择器左侧添加快捷选项

最新推荐文章于 2024-07-24 17:56:27 发布

我在在啦我让让啦

最新推荐文章于 2024-07-24 17:56:27 发布

阅读量1.1k

点赞数

分类专栏： JavaScript Vue

本文链接：https://blog.csdn.net/Annexiaobin/article/details/119321430

版权

Vue 同时被 2 个专栏收录

56 篇文章 6 订阅

订阅专栏

JavaScript

22 篇文章 1 订阅

订阅专栏

前言：

官网上只有最近一周、最近一个月和最近三个月快捷选项，但项目有要求，需要换成最近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)])
            }
        },
    ]
}