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接口的封装,而 ...
随机推荐
- js判断对象数组等是否为空
//是否为空 /** * null undefined NaN false " " {} [] 为空 * 为空 true 不为空 false * @param {*} value ...
- JS实现决策报表缓存最后一次查询条件
问题描述 决策报表在打开时希望参数控件的值可以默认是上一次页面关闭前最后一次查询所选择的值. 解决方案 每次点击查询后将参数值保存到浏览器缓存中(适用于控件在参数栏内),或每次控件值发生改变后将参数值 ...
- OPC报文详解
OPC (OLE for Process Control) 是一种工业通讯协议的标准,用于实现不同制造商的设备和系统之间的数据交换.它主要用于工业自动化系统中.OPC标准有几个不同的规范,包括OPC ...
- 第十三届蓝桥杯大赛软件赛省赛【Java 大学B 组】试题D: 最少刷题数
1 import java.util.ArrayList; 2 import java.util.Scanner; 3 4 public class Main { 5 public static vo ...
- ET8.1（一）简介
此系列文章逐个内容讲解ET8.1的新特性. ET8.1 发布,带来以下新特性: 1. 多线程多进程架构,架构更加灵活强大,多线程设计详细内容请看多线程设计课程 2. 抽象出纤程(Fiber)的概念 ...
- #dp，模型转换，排列组合#AT1983 [AGC001E] BBQ Hard
题目 有两个长度为\(n\)的序列\(a,b\),需要求 \[\sum_{i=1}^n\sum_{j=i+1}^nC(a_i+b_i+a_j+b_j,a_i+a_j) \] 其中\(n\leq 200 ...
- OpenHarmony定义组件重用样式：@Styles装饰器
如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles. @St ...
- C# 面试问答
引用:https://www.cnblogs.com/zh7791/p/13705434.html 1.什么是 COM? COM 代表组件对象模型.COM 是微软技术之一.使用这项技术,我们可以开 ...
- 三步配置阿里巴巴durid监控
三步配置阿里巴巴durid监控 官方文档 环境:jdk17, 框架springboot3 引入依赖 <properties> <druid>1.2.21</druid&g ...
- HTC Vive之Unity3d开发日记——手柄交互编程
目录: HTC Vive之Unity3d开发日记 You can fool all the people some of the time,and some of the people ...