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

1、定义元素

     <el-date-picker
style="width: 440px;"
v-model="timeQuery"
type="datetimerange"
popper-class="myDatePickerCls"
:clearable=false
:picker-options="pickerOptions"
@change="handleClearFilter('timeQuery')"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>

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

 // 搜索时间下拉框,快捷键
export const pickerOptionsTimeEle = [{
text: '今天(此刻)',
onClick(picker) {
const end = new Date();
end.setTime(end.getTime());
end.setHours(end.getHours());
end.setMinutes(end.getMinutes());
end.setSeconds(end.getSeconds());
const start = new Date();
start.setTime(start.getTime());
start.setHours(0);start.setMinutes(0);start.setSeconds(0);
picker.$emit('pick', [start, end]);
}
},
{
text: '昨天',
onClick(picker) {
const end = new Date();
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
end.setHours(23);end.setMinutes(59);end.setSeconds(59);
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
start.setHours(0);start.setMinutes(0);start.setSeconds(0);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近一周',
onClick(picker) {
const end = new Date();
end.setHours(23);end.setMinutes(59);end.setSeconds(59);
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
start.setHours(0);start.setMinutes(0);start.setSeconds(0);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近30天',
onClick(picker) {
const end = new Date();
end.setHours(23);end.setMinutes(59);end.setSeconds(59);
const start = new Date();
start.setHours(0);start.setMinutes(0);start.setSeconds(0);
start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近90天',
onClick(picker) {
const end = new Date();
end.setHours(23);end.setMinutes(59);end.setSeconds(59);
const start = new Date();
start.setHours(0);start.setMinutes(0);start.setSeconds(0);
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]

3、在页面引入并调用

 import {pickerOptionsTimeEle} from 'utils/pageComAction';

// 在data处:
data() {
return {
pickerOptions: {
shortcuts: pickerOptionsTimeEle
}
}
}

elementUI 时间选择器,时间选择快捷键的更多相关文章

  1. element-ui时间选择器--设置禁止选择的时间

    场景需求:开始日期不能小于今天,在今天之前的日期禁止选择,结束日期不能小于开始日期,开始日期之前的日期禁止选择. 效果图: element-ui的时间选择器中,有一个picker-options的属性 ...

  2. ElementUI日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这 ...

  3. vue:element-ui时间选择器限制只能点不能输入

    原文链接:点我 <el-form-item label="门店成立日期" prop="storeSetupDate"> <template&g ...

  4. JavaScript 数字转汉字+element时间选择器快速选择

    window.CN = { : '一', : '二', : '三', : '四', : '五', : '六', : '七', : '八', : '九', : '零' } window.LEVEL = ...

  5. 解决elementui日期时间选择器提交时与后台date类型不匹配问题

    问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...

  6. 不升级Element-UI 版本为时间选择器增加标记功能

    Element-UI里的date-picker是个优秀的时间选择器,支持的选项很多,定制型很强.不过date-picker在2.12版本之前并不支持自定义单元格样式,也就是2.12的cellClass ...

  7. element-ui组件中时间选择器设置时间禁用

    DateTimePicker 日期时间选择器 组件代码 <el-date-picker v-model="value1" type="datetime" ...

  8. elementUI 日期时间选择器 只能选择当前及之后的时间

    日期时间选择器  只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...

  9. 移动端material风格日期时间选择器

    原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...

随机推荐

  1. Linux IPC之共享内存C 事例

    Linux IPC之共享内存 标签: linuxrandomnull工作 2011-08-25 11:52 4123人阅读 评论(0) 收藏 举报  分类: Linux(3)  读书札记(3)  版权 ...

  2. 泛型和面向对象C++

    1. 在类内部定义的函数默觉得inline,内联函数应该在头文件里定义,由于其定义对编译器必须是可见的,以便编译器可以在调用点内联展开该函数的代码. 此时,仅有函数原型是不够的. 2.assert 3 ...

  3. luogu1726 上白泽慧音

    题目大意 求一个有向图含节点数最多且结点编号从小到大排列字典序最小的强连通分量. 注意事项 HDU1269那道题题面.数据太弱,在这道题上把我害惨了... Dfs点u时,如果与u相连的一个点v有Dfs ...

  4. 时序数据库深入浅出之存储篇——本质LSMtree,同时 metric(比如温度)+tags 分片

    什么是时序数据库 先来介绍什么是时序数据.时序数据是基于时间的一系列的数据.在有时间的坐标中将这些数据点连成线,往过去看可以做成多纬度报表,揭示其趋势性.规律性.异常性:往未来看可以做大数据分析,机器 ...

  5. PCB MS SQL 行转列(动态拼SQL)

    一.原数据: SELECT inman,indate FROM [fp_db].[dbo].[ppezhpbb] WHERE indate > '2016-5-1' AND indate < ...

  6. mysql重设root的密码 mac

    创建: 2017/09/14    第一步: 关闭已开启的mysql服务器  mysql.server stop  第二步: 关闭密码识别模式   /usr/local/bin/mysqld_safe ...

  7. 0502 php简单了解

    准备工作: 安装好wamp,配置站点:apache2.4.9\conf\httpd.conf 注意事项: 1.必须有分号 2.不要有无意义空行,会以空格形式输出. 3.变量,关键字(if,for..) ...

  8. java 关键字与保留字

    Java 关键字列表 (依字母排序 共51组),所有的关键字都是小写,在MyEclipse中都会显示不同的颜色: abstract, assert,boolean, break, byte, case ...

  9. xx网络--工具集合

    -- D:\workspace\bajie_projram\BJ.srfcb\BJ.srfcb\BJ.srfcb 8jielicai_New\App_Code\common\pg.cs---GetHt ...

  10. windows下查看端口进程占用情况

    引用:http://jingyan.baidu.com/article/3c48dd34491d47e10be358b8.html 我们在启动应用的时候经常发现我们需要使用的端口被别的程序占用,但是我 ...