<el-date-picker
v-else
v-model="searchForm.data_Selected"
type="daterange"
unlink-panels
range-separator="~"
start-placeholder="開始期間"
end-placeholder="終了期間"
:picker-options="pickerOptions"
format="yyyy/MM/dd">
</el-date-picker>
data() {
return {
pickerOptions: {
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) {
var weekDate = new Date(new Date().getTime() - 7 * 24 * 3600 * 1000)
var weekDate2 = new Date(new Date().getTime() - 7 * 24 * 3600 * 1000)
var day = weekDate.getDay()
var time = weekDate.getDate() - day + (day === 0 ? - 6 : 1)
var startDate = new Date(weekDate.setDate(time))
var start = startDate.getFullYear() + '-' + (startDate.getMonth() +1 ) + '-' + startDate.getDate()
var endDate = new Date(weekDate2.setDate(time + 6))
var end = endDate.getFullYear() + '-' + ( endDate.getMonth() + 1) + '-' + endDate.getDate()
picker.$emit('pick', [start, end])
}
}, {
text: '先月',
onClick(picker) {
var year = new Date().getFullYear()
var month = new Date().getMonth()
if (month === 0) {
month = 12
year = year - 1
} else if (month < 10) {
month = '0' + month
}
var monthDate = new Date(year, month, 0)
var start = year + '-' + month + '-01'
var end = year + '-' + month + '-' + monthDate.getDate()
picker.$emit('pick', [start, end])
}
}, {
text: '今月',
onClick(picker) {
var year = new Date().getFullYear()
var month = new Date().getMonth() + 1
const start = year + '-' + month + '-01'
const end = new Date()
picker.$emit('pick', [start, end])
}
}]
},
searchForm: {
data_Selected: ''
}
}
}

效果图:

Element UI - DatePicker 自定义日期选择期间的更多相关文章

  1. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  2. element-ui日期组件DatePicker设置日期选择范围Picker Options

    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

  3. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  4. Element UI DatePicker 时间跨度限制在同一个月内

    <el-date-picker :picker-options="pickerOptions" v-model="rangeTime" type=&quo ...

  5. element UI datepicker组件限制可选日期范围

    长话短说,简单粗暴上代码了,在element中的datepicker,可以自由选择日期,如下: 然后我们根据element 官网的文档,给datepicker组件动态改变 picker-options ...

  6. vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用

    需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...

  7. element UI+vue关于日期范围选择的操作,picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

  8. element ui datePicker 设置当前日期之前的日期不可选

    pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },

  9. Jquery ui datepicker 设置日期范围,如只能隔3天

    最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的   datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...

随机推荐

  1. PDOStatement::fetchAll

    PDOStatement::fetchAll — 返回一个包含结果集中所有行的数组(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0)高佣联盟 www.cgewang.c ...

  2. Maven知识记录(一)初识Maven私服

    Maven知识记录(一)初识Maven私服 什么是maven私服 私服即私有的仓库.maven把存放文件的地方叫做仓库,我们可以理解成我门家中的储物间.而maven把存放文件的具体位置叫做坐标.我们项 ...

  3. 数据库允许空值(null),往往是悲剧的开始

    原文: 58沈剑   架构师之路   https://mp.weixin.qq.com/s/XRSPITgWWK-2Ee-cSIqw1w 数据库字段允许空值,会遇到一些问题,此处包含的一些知识点,和大 ...

  4. DataGrip,一款数据库客户端工具,IDEA的兄弟是真香!

    DataGrip 是一款数据库管理客户端工具,方便的连接到数据库服务器,执行sql语句.创建表.创建索引以及导出数据等. DataGrip 支持几乎所有主流的关系数据库产品,如 DB2.Derby.H ...

  5. qt中使用dll库的方法

    使用dll文件时首先通过dll文件导出符号表,如下面介绍 1. 制作def 直接调用 pexports mylib.dll > mylib.def 2. 生成a 需要mylib.dll和myli ...

  6. Python | 常见的反爬及解决方法,值得收藏

    我们都知道Python用来爬数据,为了不让自家的数据被别人随意的爬走,你知道怎么反爬吗?今天播妞带着大家一起见识见识常见的反爬技术. 很多人学习python,不知道从何学起.很多人学习python,掌 ...

  7. Python面向对象编程扑克牌发牌程序,另含大量Python代码!

    1. 题目 编写程序, 4名牌手打牌,计算机随机将52张牌(不含大小鬼)发给4名牌手,在屏幕上显示每位牌手的牌. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不 ...

  8. CVE-2020-14644 weblogic iiop反序列化漏洞

    0x00 weblogic 受影响版本 Oracle WebLogic Server 12.2.1.3.0, 12.2.1.4.0, 14.1.1.0.0 0x01 环境准备 1.安装weblogic ...

  9. C# 8.0 的新特性概览和讲解

    本文转自 https://blog.csdn.net/hez2010/article/details/84036742 C# 8.0 的新特性概览和讲解 前言 新的改变 可空引用类型(Nullable ...

  10. Linux top详解

    命令 top 参数说明: d:改变显示的更新速度 q:  没有任何延迟的显示速度 c:切换显示模式,共有两种模式,一是只显示执行档的名称,零一种显示完整的路径与名称S:累计模式,会将已完成或消失的子行 ...