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接口的封装,而 ...
随机推荐
- Clang开发注意事项
Clang tools need their builtin headers and search for them the same way Clang does. Thus, the defaul ...
- KingbaseES V8R6 中unlogged表
前言 KingbaseESV8R6有一种表称为unlogged,在该表新建的索引也属于unlogged.和普通表的区别是,对该表进行DML操作时候不将该表的变更记录变更写入到wal文件中.在数据库异常 ...
- redis单机部署出现READONLY You can't write against a read only
(error) READONLY You can't write against a read only replica. 以上错误一般只会出现在主从集群配置中,可是我这里是redis单机配置,居然也 ...
- 区别对比 Python、Perl、VB、Ruby、C/C++、C# .Net、PHP、Java… 等多编程语言
1. 编程语言类型:首先,Python.C/C++.Java 都是强类型的编程语言.强类型的编程语言定义如下: 强类型的编程语言是一种强制类型定义的编程语言,即一旦某一个变量被定义类型,如果不经强制转 ...
- C++虚继承原理与类布局分析
C++虚继承原理与类布局分析 引言 在开始深入了解虚继承之前,我们先要明白C++引入虚继承的目的.C++有别于其他OOP语言最明显的特性就是类的多继承,而菱形继承结构则是多继承中最令人头疼的情况. 我 ...
- 使用windbg分析dump文件
使用windbg分析dump文件的步骤. 准备工作. 打开dump文件. 指定符号表文件的路径. 指定可执行文件的路径. 指定源码文件的路径. 在windbg的命令行,输入并执行如下命令 .reloa ...
- 深入理解 SQL UNION 运算符及其应用场景
SQL UNION运算符 SQL UNION运算符用于组合两个或多个SELECT语句的结果集. 每个UNION中的SELECT语句必须具有相同数量的列. 列的数据类型也必须相似. 每个SELECT语句 ...
- dev DEV控件：gridControl常用属性设置
引用:https://www.cnblogs.com/kingsliu/articles/6145679.html 1.隐藏最上面的GroupPanelgridView1.OptionsView.Sh ...
- java集合源码详解
一 Collection接口 1.List 1.1ArrayList 特点 1.底层实现基于动态数组,数组特点根据下表查找元素速度所以查找速度较快.继承自接口 Collection ->Lis ...
- 在ECS上安装部署openGauss数据库指导手册
在 ECS 上安装部署 openGauss 数据库指导手册 文档下载:在 ECS 上安装部署 openGauss 数据库指导手册.docx 前 言 简介 openGauss 是关系型数据库,采用客户端 ...