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设置选择日期最大范围（优秀版）的更多相关文章

  1. MTK Android 设置-选择日期格式 [管理和组织首选项，ListPreference,CheckBoxPreference,EditTextPreference,RingtonePreference]

    ###android.preference.ListPreference的一些特性 android:key  选项的名称或键 android:title  选项的标题 android:summary  ...

  2. layui日历控件设置选择日期不能超过当前日期

    layui.use('laydate', function() { var laydate = layui.laydate; laydate.render({ elem : '#begin', max ...

  3. Vue+Element实现网页版个人简历系统

    这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大 ...

  4. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  5. 自定义Vue&Element组件，实现用户选择和显示

    在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...

  6. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理，对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  7. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  8. My97DatePicker设置，包括隐藏 清空，设置最大日期等 转载

    My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件:     <script type=&quo ...

  9. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  10. 循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理

    在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...

随机推荐

  1. Python 合并Excel数据 （Excel文件单sheet）

    一.Python批量合并Excel数据<方法1> import pandas as pd import glob import os # 使用glob.glob函数获取指定目录下所有以.x ...

  2. nginx root 和 alias 的区别

    区别: alias 含有rewrite的意思,可以重写掉不存在的路径.( nginx rewrite请看这里) 比如正常访问的地址是: http://ip:port 当我想让 http://ip:po ...

  3. KingbaseES V8R6 中syssql_tmp目录说明

    前言 不久前有前端人员咨询过一个问题,为什么syssql_tmp目录下会产生如此多的大文件. 针对这个目录的解释是:临时文件(用于排序超出内存容量的数据等操作)是在$KINGBASE_DATA/bas ...

  4. Python列表list 分片实例

    1 a = list(range(10)) 2 print(a[::]) #复制一个列表 3 print(a[::2]) #每隔2个取一次 4 print(a[::3]) #每隔3个取一次 5 6 p ...

  5. 网络设备性能指标之pps

    基本概念: Bps:Byte per second 每秒传输多少字节 bps: bits per second 每秒传输多少位 ,这个也叫做端口速率 pps:Packet Per Second(包每秒 ...

  6. #搜索，树剖，set#洛谷 3322 JZOJ 4049 [SDOI2015]排序&洛谷 3320 JZOJ 4050 [SDOI2015]寻宝游戏

    洛谷 3322 [SDOI2015]排序 题目 小A有一个\(1\sim 2^N\)的排列\(A[1\sim 2^N]\),他希望将A数组从小到大排序,小A可以执行的操作有\(N\)种,每种操作最多可 ...

  7. #树链剖分，线段树#洛谷 2486 [SDOI2011]染色

    题目 分析 就是把维护颜色段和树结合起来, 注意拼接的时候要减去中间相同的部分 代码 #include <cstdio> #include <cctype> #include ...

  8. 深度剖析 Spring 框架在 Java 应用开发中的优势与应用

    Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...

  9. Numpy数组索引和切片

    数组可以通过索引或切片的方式进行访问或修改,数组切片x[start:stop:step],与Ptyhon内置的list标准索引和切片类似,只是数组产生的是一个非副本视图,根据条件索引的值如果修改,直接 ...

  10. LTV预估的一些思考

    什么是LTV 用户生命周期价值(Lifetime Value, LTV)是一个非常重要的指标,定义为单个用户在某种生命周期内(i.e. 从开始使用产品到停止使用期间) 为产品创造的总价值. 比如GMV ...