• elementUI 时间选择器,时间选择快捷键


    elementUI的时间快捷键,使用属性:picker-options="pickerOptions",由于pickerOptions的定义很长,也在其他地方共用,因此建议提取出来在公用文件定义,再在页面直接引用。

    1、定义元素

     1     <el-date-picker
     2               style=" 440px;"
     3               v-model="timeQuery"
     4               type="datetimerange"
     5               popper-class="myDatePickerCls"
     6               :clearable=false
     7               :picker-options="pickerOptions"
     8               @change="handleClearFilter('timeQuery')"
     9               range-separator=""
    10               start-placeholder="开始日期"
    11               end-placeholder="结束日期"
    12               align="right">
    13     </el-date-picker>    

    2、再外部定义一个js文件,并定义快捷键的方法:

     1 // 搜索时间下拉框,快捷键
     2 export const pickerOptionsTimeEle = [{
     3     text: '今天(此刻)',
     4     onClick(picker) {
     5       const end = new Date();
     6       end.setTime(end.getTime());
     7       end.setHours(end.getHours());
     8       end.setMinutes(end.getMinutes());
     9       end.setSeconds(end.getSeconds());
    10       const start = new Date();
    11       start.setTime(start.getTime());
    12       start.setHours(0);start.setMinutes(0);start.setSeconds(0);
    13       picker.$emit('pick', [start, end]);
    14     }
    15   },
    16   {
    17     text: '昨天',
    18     onClick(picker) {
    19       const end = new Date();
    20       end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
    21       end.setHours(23);end.setMinutes(59);end.setSeconds(59);
    22       const start = new Date();
    23       start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
    24       start.setHours(0);start.setMinutes(0);start.setSeconds(0);
    25       picker.$emit('pick', [start, end]);
    26     }
    27   },
    28   {
    29     text: '最近一周',
    30     onClick(picker) {
    31       const end = new Date();
    32       end.setHours(23);end.setMinutes(59);end.setSeconds(59);
    33       const start = new Date();
    34       start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
    35       start.setHours(0);start.setMinutes(0);start.setSeconds(0);
    36       picker.$emit('pick', [start, end]);
    37     }
    38   },
    39   {
    40     text: '最近30天',
    41     onClick(picker) {
    42       const end = new Date();
    43       end.setHours(23);end.setMinutes(59);end.setSeconds(59);
    44       const start = new Date();
    45       start.setHours(0);start.setMinutes(0);start.setSeconds(0);
    46       start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
    47       picker.$emit('pick', [start, end]);
    48     }
    49   },
    50   {
    51     text: '最近90天',
    52     onClick(picker) {
    53       const end = new Date();
    54       end.setHours(23);end.setMinutes(59);end.setSeconds(59);
    55       const start = new Date();
    56       start.setHours(0);start.setMinutes(0);start.setSeconds(0);
    57       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
    58       picker.$emit('pick', [start, end]);
    59     }
    60   }]

    3、在页面引入并调用

     import {pickerOptionsTimeEle} from 'utils/pageComAction';
    
    // 在data处:
     data() {
          return {
             pickerOptions: {
                 shortcuts: pickerOptionsTimeEle
            }
        }
    }    
  • 相关阅读:
    Oracle导出存储过程
    正在执行的SQL和之前执行的SQL
    查看TEMP使用情况
    Oracle TEMP表空间切换
    VARCHAR2字段关联
    PL/SQL 异常处理
    pl/sql 关于变量定义的问题
    FILTER优化
    PL/SQL拼接和使用绑定变量
    循环处理数据提交
  • 原文地址:https://www.cnblogs.com/luoxuemei/p/10929030.html
Copyright © 2020-2023  润新知