1.

 <div>
<el-date-picker
v-model="value4"
type="month"
:picker-options="pickerOptions"
placeholder="选择月">
</el-date-picker>
<span>至</span>
<el-date-picker
v-model="value3"
:picker-options="pickerOptions3"
type="month"
placeholder="选择月">
</el-date-picker>
</div>

  

pickerOptions: {
shortcuts: [
{
text: '这个季度',
onClick(picker) {
const date = new Date();
const quarter = date.getMonth();
console.log(quarter);
if(quarter<3) {
const date = new Date();
const start=date.setMonth(0);
picker.$emit('pick', start);
console.log(1)
}
if(2<quarter&&quarter<6) {
const date = new Date();
const start = date.setMonth(3);
picker.$emit('pick', start);
console.log(2)
}
if(5<quarter&&quarter<9) {
const date = new Date();
const start = date.setMonth(6);
picker.$emit('pick', start);
console.log(3)
}
if(quarter>8) {
const date = new Date();
const start = date.setMonth(9);
picker.$emit('pick', start);
console.log(4)
}
}
},
{
text: '上半年',
onClick(picker) {
const date = new Date();
const start = date.setMonth(0);
picker.$emit('pick', start);
}
},
{
text: '下半年',
onClick(picker) {
const date = new Date();
const start = date.setMonth(6);
picker.$emit('pick', start);
}
},
{
text: '今年',
onClick(picker) {
const date = new Date();
const start = date.setMonth(0);
picker.$emit('pick', start);
}
},
{
text: '去年',
onClick(picker) {
const date = new Date();
const start = date.setMonth(0-12);
picker.$emit('pick', start);
}
},
]
},
pickerOptions3: {
shortcuts: [
{
text: '这个季度',
onClick(picker) {
const date = new Date();
const quarter = date.getMonth();
if(quarter<3) {
const start=date.setMonth(3);
picker.$emit('pick', start);
}
if(2<quarter&&quarter<6) {
const start = date.setMonth(6);
picker.$emit('pick', start);
}
if(5<quarter&&quarter<9) {
const start = date.setMonth(9);
picker.$emit('pick', start);
}
if(quarter>8) {
const start = date.setMonth(11);
picker.$emit('pick', start);
}
}
},
{
text: '上半年',
onClick(picker) {
const date = new Date();
const end = date.setMonth(5);
picker.$emit('pick', end);
}
},
{
text: '下半年',
onClick(picker) {
const date = new Date();
const end = date.setMonth(11);
picker.$emit('pick', end);
}
},
{
text: '今年',
onClick(picker) {
const date = new Date();
const end = date.setMonth(11);
picker.$emit('pick', end);
}
},
{
text: '去年',
onClick(picker) {
const date = new Date();
const end = date.setMonth(0-1);
picker.$emit('pick', end);
}
}
]
},

  效果:

2.

<el-date-picker
v-model="value5"
type="datetimerange"
:picker-options="pickerOptions1"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>

  

  pickerOptions1: {
shortcuts: [
{
text: '今天',
onClick(picker) {
const end = new Date();
const start = new Date();
picker.$emit('pick', [start, end]);
}
},
{
text: '昨天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
end.setTime(end.getTime() - 3600 * 1000 * 24 );
picker.$emit('pick', [start, end]);
}
},
{
text: '前天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24*2);
end.setTime(end.getTime() - 3600 * 1000 * 24*2 );
picker.$emit('pick', [start, end]);
}
},
{
text: '一周前',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
// end.setTime(end.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', [start, end]);
}
},
{
text: '一个月前',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth()-1);
picker.$emit('pick', [start, end]);
}
}, {
text: '一年前',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setFullYear(start.getFullYear()-1);
picker.$emit('pick', [start, end]);
}
}]
},

  

3.

<el-date-picker
v-model="value7"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions2">
</el-date-picker>

  

pickerOptions2: {
shortcuts: [
{
text: '这一周',
onClick(picker) {
const day = new Date(); //现在的时间
var num = day.getDay()-1; //day.getDay(),获取当日是本周的第几天
const start = day.setDate(day.getDate() - num); //本周的第一天
const end = day.setDate(day.getDate() + 6); //本周最后一天
picker.$emit('pick', [start, end]);
}
},
{
text: '这个月',
onClick(picker) {
const day = new Date();
//本月的第一天
const start = day.setDate(1);
//下个月
day.setMonth(day.getMonth()+1);
//下个月第一天减1得到本月最后一天
const end = day.setDate(day.getDate() - 1);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}
]
},

  

element 的时间快捷键的更多相关文章

  1. excel插入当前时间快捷键Ctrl+;

    之前写了一篇editplus如何插入当前时间_Ctrl+D的文章,有的同学说excel用习惯了,那在这我们就说一下excel插入当前时间快捷键,让您在excel快速插入当前时间 excel插入当前时间 ...

  2. element ui 时间控件 多个日期

    前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...

  3. element ui 时间 date 差一天

    let BirthdayYMD = common.formatDate(this.addForm.Dendline); this.addForm.Dendline = new Date(Birthda ...

  4. vue+element ui 时间格式化

    <el-table-column prop="startTime" label="日期" width="200" align=&quo ...

  5. element 日期时间选择器type = "datetimerange",限制时间的选择范围

    这里限制了只能选择一周的时间   pickerOptions:{          onPick(time){              // 如果选择了只选择了一个时间              i ...

  6. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

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

    elementUI的时间快捷键,使用属性:picker-options="pickerOptions",由于pickerOptions的定义很长,也在其他地方共用,因此建议提取出来 ...

  8. Word 文档插入时间日期禁止自动更新

    前些天写了点总结并插入时间和日期,记得勾掉了那个自动更新的,但是刚才打开时发现当时的日期和时间变成现在的了,我就纳闷了,然后我去看那插入日期和时间的那个框,里面确实没有勾选自动更新,于是百度, 百度都 ...

  9. editplus如何插入当前时间_Ctrl+D

    之前的工作日志一般都是用excel来写的,但那个占用内存有点大,有时也比较麻烦,有时内容一行没办法显示,会自动截断,有点类似缩略图,无法一目了然 习惯了使用editplus,轻便快速,不占内存.但是有 ...

随机推荐

  1. Linux软件管理--RPM工具

    目录 Linux软件管理--RPM工具 Rpm基础概述: Rpm包安装管理 Linux软件管理--RPM工具 Rpm基础概述: RPM全称RPM Package Manager缩写,由红帽开发用于软件 ...

  2. Java集合类框架的最佳实践有哪些

    根据应用的需要正确选择要使用的集合的类型对性能非常重要,比如:元素的大小是固定的,而且能事先知道,我们就应该用Array而不是ArrayList. 有些集合类允许指定初始容量.因此,如果我们能估计出存 ...

  3. Linux下的Jenkins作为hub,Windows作为node节点,在Android手机上执行自动化脚本

    1.在Linux上放selenium-server-standalone-2.53.0.jar,在jar包目录下执行命令java -jar selenium-server-standalone-2.5 ...

  4. 如何快速使用YOLO3进行目标检测

    本文目的:介绍一篇YOLO3的Keras实现项目,便于快速了解如何使用预训练的YOLOv3,来对新图像进行目标检测. 本文使用的是Github上一位大神训练的YOLO3开源的项目.这个项目提供了很多使 ...

  5. 22.ReadWriteLock读写锁

    import java.util.Random; import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.R ...

  6. python 在图像上写中文字体 (python write Chinese in image)

    本人处理图像的时候经常使用opencv的包,但是 cv2.putText 显示不了中文,所以查找了如何在python在图像上写中文的方法,在伟大的Stack Overflow上面找到一个方法,分享给大 ...

  7. c++ fork进程与同步锁

    首先定义在多进程环境中的锁,采用读写锁,即可以同时读,但只能单独写. 头文件processLock.h #ifndef PROCESSLOCK_H #define PROCESSLOCK_H #inc ...

  8. mac 格式化U盘

    作者:Bailm链接:https://www.zhihu.com/question/27888608/answer/486347894来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  9. java版扫雷

    package com.titian.bean; import java.awt.CardLayout; import java.awt.Point; public class Grid { char ...

  10. centos下安装java jdk1.8

    ---恢复内容开始--- mysql密码修改了,发现还没装jdk,那就一起记录下来吧.虽然网上好多,但自己想查更方便了. 查看有没有装jdk #java -version显示下面信息,不是oracle ...