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

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 时间选择器,时间选择快捷键的更多相关文章
- element-ui时间选择器--设置禁止选择的时间
场景需求:开始日期不能小于今天,在今天之前的日期禁止选择,结束日期不能小于开始日期,开始日期之前的日期禁止选择. 效果图: element-ui的时间选择器中,有一个picker-options的属性 ...
- ElementUI日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这 ...
- vue:element-ui时间选择器限制只能点不能输入
原文链接:点我 <el-form-item label="门店成立日期" prop="storeSetupDate"> <template&g ...
- JavaScript 数字转汉字+element时间选择器快速选择
window.CN = { : '一', : '二', : '三', : '四', : '五', : '六', : '七', : '八', : '九', : '零' } window.LEVEL = ...
- 解决elementui日期时间选择器提交时与后台date类型不匹配问题
问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...
- 不升级Element-UI 版本为时间选择器增加标记功能
Element-UI里的date-picker是个优秀的时间选择器,支持的选项很多,定制型很强.不过date-picker在2.12版本之前并不支持自定义单元格样式,也就是2.12的cellClass ...
- element-ui组件中时间选择器设置时间禁用
DateTimePicker 日期时间选择器 组件代码 <el-date-picker v-model="value1" type="datetime" ...
- elementUI 日期时间选择器 只能选择当前及之后的时间
日期时间选择器 只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...
- 移动端material风格日期时间选择器
原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...
随机推荐
- Android中检測字符编码(GB2312,ASCII,UTF8,UNICODE,TOTAL——ENCODINGS)方法(一)
package com.android.filebrowser; import java.io.*; import java.net.*; public class FileEncodingD ...
- 欧几里得 & 拓展欧几里得算法 解说 (Euclid & Extend- Euclid Algorithm)
欧几里得& 拓展欧几里得(Euclid & Extend-Euclid) 欧几里得算法(Euclid) 背景: 欧几里德算法又称辗转相除法.用于计算两个正整数a.b的最大公约数. -- ...
- 【NOIP2018】为什么这么无力啊
菜鸡又要爆零了 辛辛苦苦背板子结果考时候脑子一片空白 第一题线段树调了半小时 看完三道题两道写暴搜一道写暴力(说是暴搜,觉得更像写了个背包) 别提暴搜还忘记剪枝. . . . . . 我觉得考场上最菜 ...
- [Apple开发者帐户帮助]三、创建证书(6)创建创建VoIP服务证书
VoIP:基于IP的语音传输(英语:Voice over Internet Protocol,缩写为VoIP)是一种语音通话技术,经由网际协议(IP)来达成语音通话与多媒体会议,也就是经由互联网来进行 ...
- Django day06 模版层(一) 变量和深度查询
一.模版语法之变量: 1 - {{ 变量 }} ******重要*******{#这个相当于print了该变量#} def index(request): name = 'prince' #字符串 ...
- vue 中数据没有同步渲染的解决方法
今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...
- [BZOJ1821][JSOI2010]部落划分
感觉学了这么久还是有那么一丢丢进步的...上个学期看到这道题,虽然早就学过并查集和二分了但还是一点思路都没有,现在可以秒切了呢 思路就是二分+并查集,有些人说是生成树,其实它没有变成树,只是运用了生成 ...
- Jenkins上Git ssh登陆配置
1. 首先登陆linux机器 2. 切换到jenkins用户 3. 生成ssh key ssh-keygen -t rsa -C 'amysu@acxiom.com' 4. 将生成的ssh ke ...
- mac下配置nginx
nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,下面我们来了解下nginx的用法. 安装nginx 使用brew安装nginx brew install ...
- CSS样式优先级和权重问题(部分)
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...