vue2使用el-date-picker实现动态日期范围demo
更新时间：2023年06月09日 10:21:45 作者：蛋炒太阳
这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
Vue2 & element ui
<el-date-picker type="daterange" :picker-options="pickerOptions"
let _minTime;
let _maxTime;
let timeRange = 10 * 24 * 60 * 60 * 1000;
export default {
data() {
return {
pickerOptions:{
onPick(time) {
if (!time.maxDate) {
_minTime = time.minDate.getTime() - timeRange;
_maxTime = time.minDate.getTime() + timeRange;
} else {
_minTime = null;
_maxTime = null;
}
},
disabledDate(time) {
if (_minTime && _maxTime) {
return time.getTime() < _minTime || time.getTime() > _maxTime;
}
}
}
};
}
……
};
Vue3 & element plus
<el-date-picker type="daterange" :disabled-date="disabledDate" @calendar-change="eventCalendarChange"
let _minTime = null;
let _maxTime = null;
let timeRange = 3 * 30 * 24 * 60 * 60 * 1000;
const disabledDate = (time) => {
if (_minTime && _maxTime) {
return time.getTime() < _minTime || time.getTime() > _maxTime;
}
};
const eventCalendarChange = (data) => {
const [ start ] = data;
if (start) {
_minTime = start.getTime() - timeRange;
_maxTime = start.getTime() + timeRange;
} else {
_minTime = null;
_maxTime = null;
}
};
以上就是vue2使用el-date-picker实现动态日期范围示例的详细内容，更多关于vue2 el-date-picker的资料请关注脚本之家其它相关文章！
相关文章
uniapp小程序上传文件webapi后端项目asp.net完整代码
在uniapp中,实现文件上传功能也变得非常简单,下面这篇文章主要给大家介绍了关于uniapp小程序上传文件webapi后端项目asp.net的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了原生echart和vue-echart的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
Vue.js条件渲染和列表渲染以及Vue中key值的内部原理
这篇文章主要介绍了Vue.js条件渲染和列表渲染，以及Vue中key值的内部原理，文中有详细的代码示例，感兴趣的同学可以参考阅读2023-04-04
本节，我们将讨论关于AST的转换。所谓AST的转换，指的是对AST进行一系列操作，将其转换为新的AST的过程。新的AST可以是原语言或原DSL的描述，也可以是其他语言或其他DSL的描述。例如，我们可以对模板AST进行操作，将其转换为JavaScriptAST2023-01-01
这篇文章主要为大家详细介绍了vue.js实现回到顶部动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了基于Vue实现电商SKU组合算法问题 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章介绍了Vue.js通过组件处理Icon图标的方法，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
这篇文章主要介绍了vue+vuex+axio从后台获取数据存入vuex，组件之间共享数据,非常具有实用价值，需要的朋友可以参考下2017-04-04
这篇文章主要给大家介绍了关于Vue动态创建注册component的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了vue中的provide / inject 有什么用处,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
最新评论