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. torch的cuda版本安装

    1.拥有英伟达显卡NVIDIA NVIDIA CUDA各版本下载链接(包括最新11版本和以往10.2版本) 以下是从NVIDIA官网转过来的链接,方便需要下载各种版本CUDA的同学.(借阅) http ...

  2. 聊一下Button事件、命令、行为的触发顺序

    1.我们新建一个xaml <StackPanel Width="200" Margin="20"> <Button Height=" ...

  3. IntelliJ IDEA集成本地Maven步骤

    IntelliJ IDEA集成本地Maven步骤 一.前期准备 Maven已经在本地环境配置完成,步骤可以参考我的这篇文章: https://www.cnblogs.com/rainbow-1/p/1 ...

  4. #LCT，树状数组#CF1137F Matches Are Not a Child's Play

    题目 分析 考虑从删除序列末尾来看,最大值一定在末尾, 然后与次大值之间夹了整条路径的点,降序以此类推 实际上从小到大是每个点到最大点的路径被打通的过程,由此分成若干条实链. 删除序列的位置实际上是到 ...

  5. 使用8086汇编驱动SHT11传感器

    前言:使用Proteus 7.8仿真软件实现8086接入SHT11温湿度传感器(实现读取温度数据部分功能),并学习如何在没有集成硬件控制下串行总线的驱动方式,汇编的精髓就是寄存器的操作.各种寻址方式. ...

  6. 解析 Go 编程语言数据类型：bool、整数、浮点数和字符串详细介绍

    数据类型 数据类型是编程中的重要概念.数据类型指定了变量值的大小和类型.Go是静态类型的,这意味着一旦变量类型被定义,它只能存储该类型的数据. 基本数据类型 Go 有三种基本数据类型: bool:表示 ...

  7. 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（2）

    1.问题描述: 开发服务端推送,客户端能收到离线推送,但是推送收到的通知只能从手机顶部下拉看到,无法收到一个顶部的弹框.请问是什么原因? 解决方案: 可能原因一: 消息提醒的方式与消息类别有关,比如: ...

  8. Python格式化字符串：%、format、f-string

    目前Python格式化字符串的方式有三种: 1. % 2.format 3.f-string % 格式化常用方法: # % 格式化字符串 s1 = 'name is %s' % ('zhangsan' ...

  9. C++调用Python-6：调用Python类

    # mytest.py class Test: def hello(self): print("this is test class hello function no params ret ...

  10. pyqt5报错：qt.qpa.plugin: Could not find the Qt platform plugin "windows" in "" This ap

    环境: win10 Python 3.7.5 vs code 解决方法: 新建环境变量,然后重启  vs code 就可以了 QT_QPA_PLATFORM_PLUGIN_PATH C:\Users\ ...