vue+element设置选择日期最大范围（优秀版）
element的选择日期组件里没有像移动端vant直接设置max-date的api，因此在不能动态设置选择的第二个时间(需要分别选择起止时间和结束时间，但可以加上关联)，
看了很多博客有的效果直接出不来，有的代码格式看不懂要不就是不完全符合自己的需求，自己摸索看前人可取的方法终于实现了（帮后台写的，等写完后台需求已经不需要了，记录下笔记，例子范围是7天）
效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-date-picker
v-model="value1"
type="date"
placeholder="开始日期"
value-format="timestamp"
:picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
v-model="value2"
type="date"
placeholder="结束日期"
value-format="timestamp"
:picker-options="pickerOptions1">
</el-date-picker>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data(){
return {
value1:'',
value2:'',
maxLength:7, //设置两个日期的最大间隔
pickerOptions0: {
disabledDate:(time)=>{
if(this.value2!=''){
//console.log(this.value2) //清除结束日期时this.value2的值为null
if(this.value2===null){
return time.getTime() < Date.now();
}else{
let lastTime = this.value2-this.maxLength*24*3600*1000 + 8.64e7
return time.getTime() > this.value2 || time.getTime() < lastTime
}
}else{
return time.getTime() < Date.now(); //将比当前时间还早的时间不可选
}
}
},
pickerOptions1: {
disabledDate:(time)=>{
if(this.value1!=''){
let nextTime = this.value1+this.maxLength*24*3600*1000 - 8.64e7
return time.getTime() < this.value1||time.getTime() > nextTime;
}else{
return time.getTime() < Date.now()
}
}
},
}
},
})
</script>
</html>
vue+element设置选择日期最大范围（优秀版）的更多相关文章
- MTK Android 设置-选择日期格式 [管理和组织首选项，ListPreference,CheckBoxPreference,EditTextPreference,RingtonePreference]
###android.preference.ListPreference的一些特性 android:key 选项的名称或键 android:title 选项的标题 android:summary ...
- layui日历控件设置选择日期不能超过当前日期
layui.use('laydate', function() { var laydate = layui.laydate; laydate.render({ elem : '#begin', max ...
- Vue+Element实现网页版个人简历系统
这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- 自定义Vue&Element组件，实现用户选择和显示
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理，对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- My97DatePicker设置，包括隐藏 清空，设置最大日期等 转载
My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件: <script type=&quo ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- 循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理
在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...
随机推荐
- 提升团队协作效率：欧奥PicHome打造无缝资料共享平台
1. 引言 在快节奏的工作环境中,团队成员需要快速访问和共享信息.有效的资料共享不仅提高工作效率,还能促进团队协作和创新.然而,许多团队仍在使用传统的文件共享方法,这些方法往往效率低下,难以满足现代工 ...
- rust使用lazy_static对全局变量多线程并发读写示例
首先需要在项目依赖Cargo.toml添加lazy_static依赖项 [dependencies] lazy_static = "1.4.0" 示例代码如下: use lazy_ ...
- KingbaseES 数据库安装报错案例分析
Linux系统安装V008R006C007B0012版本KingbaseES数据库报错:Unsupported major.minor version 52.0 系统版本: [root@vm-10-3 ...
- 正则表达式 (?<= 与 (?= 的区别
(?=pattern) 正向肯定预查,在任何匹配pattern的字符串开始处匹配查找字符串.这是一个非获取匹配, 也就是说,该匹配不需要获取供以后使用.例如,"Windows(?=95|98 ...
- #杜教筛，欧拉函数#51nod 1227 平均最小公倍数
题目 设 \(\large A(n)=\frac{1}{n}\sum_{i=1}^n lcm(i,n)\), 求 \(\sum_{i=l}^rA(i)\),\(n\leq 10^9\) 分析 题意可以 ...
- 记录协助Javaer硬件快速开发过程之Web技术栈对接施耐德网络IO网关
前一段时间有个Java技术栈的朋友联系到我,需要快速对接现有的无人值守称重系统,这里的对接是指替代现有系统,而非软件层面的对接,也就是利用现有的硬件开发一套替代现有软件的自动化系统.主要设备包括地磅秤 ...
- 如何用vsftpd实现用户不同权限:只能下载,可上传,管理权限等 [仅供参考未亲测]
如何用vsftpd实现用户不同权限:只能下载,可上传,管理权限等 2007-01-29 10:20:09 分类: LINUX 前提条件: 必须安装包:vsftpd-2.0.1-5 ...
- redis 简单整理——HyperLogLog[十三]
前言 简单介绍一下HyperLogLog. 正文 HyperLogLog并不是一种新的数据结构(实际类型为字符串类型),而 是一种基数算法,通过HyperLogLog可以利用极小的内存空间完成独立总数 ...
- 重新整理.net core 计1400篇[十] (.net core 中的依赖注入的服务的生命周期)
前言 首先我们知道一个东西,那就是生命周期和timelife 的配置有关. 正文 首先看下IServiceProvider的数据结构: 其数据结构是一颗树: 我是一个抽象画家,红色部分是IServic ...
- 对于dubbo和zookeeper的浅见
在服务器集群环境中,阿里推出的dubbo框架一直是让人仰望的存在,可如今想想,也没啥. dubbo其实就是一个调用工具,他的服务调度也就是知名的几个负载均衡算法,服务监控其实也就是有一个定时任务在定期 ...