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. go语言从例子开始之Example25.通道方向

    当使用通道作为函数的参数时,你可以指定这个通道是不是只用来发送或者接收值.这个特性提升了程序的类型安全性. Example: package main import "fmt" / ...

  2. bzoj 1176 cdq分治套树状数组

    题面: 维护一个W*W的矩阵,初始值均为S.每次操作可以增加某格子的权值,或询问某子矩阵的总权值.修改操作数M<=160000,询问数Q<=10000,W<=2000000. Inp ...

  3. 数据索引文件idx

    数据索引文件idx 数据索引文件idx 数据索引文件idx

  4. Caused by: java.lang.NoClassDefFoundError: javax/validation/ParameterNameProvider

    问题现象:今天部署代码的时候发现,在beta环境可以正常部署,但是到了test环境就一直不成功,我以为是环境问题,就重新部署,但是没效,看了看日志发现问题是:Caused by: java.lang. ...

  5. maven 使用idea运行按钮install

    根据需要配置 例: clean install 离线 设置vm 跳过测试 -Xms1024m -Xmx1024m -XX:MaxPermSize=1024m 附(离线+跳过测试): mvn clean ...

  6. spring的 onApplicationEvent方法被执行两次问题

    原文地址:http://www.cnblogs.com/a757956132/p/5039438.html 在做web项目开发中,尤其是企业级应用开发的时候,往往会在工程启动的时候做许多的前置检查. ...

  7. 阿里云重磅发布RDS for SQL Server AlwaysOn集群版

    2018年双十一刚过,阿里云数据库发布RDS for SQL Server AlwaysOn集群版,这是业界除微软云SQL Database外,首家云计算公司基于SQL Server最新AlwaysO ...

  8. vue基础九

    1.使用组件 1.1注册 要注册一个全局组件,你可以使用 Vue.component(tagName, options). 例如: Vue.component('my-component', { // ...

  9. 探索Redis设计与实现11:使用快照和AOF将Redis数据持久化到硬盘中

    本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...

  10. Oracle数据库中,sql中(+)(-)的含义

    SELECT *FROM TABLE1 A,TABLE2 B WHERE A.ID(+)=B.ID; 右连接=RIGHT JOIN SELECT *FROM TABLE1 A,TABLE2 B WHE ...