Element UI - DatePicker 自定义日期选择期间
<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 自定义日期选择期间的更多相关文章
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- Element UI DatePicker 时间跨度限制在同一个月内
<el-date-picker :picker-options="pickerOptions" v-model="rangeTime" type=&quo ...
- element UI datepicker组件限制可选日期范围
长话短说,简单粗暴上代码了,在element中的datepicker,可以自由选择日期,如下: 然后我们根据element 官网的文档,给datepicker组件动态改变 picker-options ...
- vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用
需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...
- element UI+vue关于日期范围选择的操作,picker-options属性的使用
一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...
- element ui datePicker 设置当前日期之前的日期不可选
pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },
- Jquery ui datepicker 设置日期范围,如只能隔3天
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...
随机推荐
- 获取判断IE版本 TypeError: Cannot read property 'msie' of undefined
注意:以下方法只适用于IE11 以下: TypeError: Cannot read property 'msie' of undefined jquery1.9去掉了 $.browser 所以报错 ...
- HTTP POST 请求的两种编码格式:application/x-www-form-urlencoded 和 multipart/form-data
在常见业务开发中,POST 请求常常在这些地方使用:前端表单提交时.调用接口代码时和使用 Postman 测试接口时.我们下面来一一了解: 一.前端表单提交时 application/x-www-fo ...
- C语言学习笔记之进制之间的转换
这一篇主要是对进制之间转换的讲解,方便查看,以防忘记 二进制 逢二进一 八进制 逢八进一 以0开头, 0就是8进制的标志 十进制 逢十进一 ...
- 解决使用rollup构建ECharts过程中遇到的问题
1.ECharts官方文档 参考:自定义构建 ECharts - ECharts Documentation 2.解决问题 改动一: // line.js // 引入 echarts 主模块. // ...
- Java集合最全解析,学集合,看这篇就够用了!!!
在看集合类之前, 我们要先明白一下概念: 1.数据结构 (1):线性表 [1]:顺序存储结构(也叫顺序表) 一个线性表是n个具有相同特性的数据元素的有限序列.数据元素是一个抽象的符号,其具体含义在不同 ...
- 2020-03-27:JDK1.8中在数据结构上,对HashMap做了什么样的改进?为什么?
福哥答案2020-04-04:头插改尾插,解决链表成环的问题.链表改成链表和红黑树.
- super与this的区别,更进一步的区别!——Java学习
文章目录 this与super的含义 前言 例证 this super 总结 this与super的含义 在Java中,this有两层含义: 指示隐式参数的引用(就是当前对象的引用) 调用该类的其他构 ...
- 分享一个Flink checkpoint失败的问题和解决办法
本文来自: PerfMa技术社区 PerfMa(笨马网络)官网 接触Flink一段时间了,遇到了一些问题,其中有一个checkpoint失败导致作业重启的问题,遇到了很多次,重启之后一般也能恢复正常, ...
- 【HAOI2015】树上染色 - 树形 DP
题目描述 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他 的N-K个点染成白色 . 将所有点染色后,你会获得黑点两两之 ...
- 《Java从入门到失业》第二章:Java环境(三):Java命令行工具
2.3Java命令行工具 2.3.1编译运行 到了这里,是不是开始膨胀了,想写一段代码来秀一下?好吧,满足你!国际惯例,我们写一段HelloWorld.我们在某个目录下记事本,编写一段代码如下: 保存 ...