详解element-ui动态限定的日期范围选择器代码片段

何开此题

我是一个码农，缘起就是这次需求遇到了之前实现过的功能细节，不想再从头翻组件文档实现一遍，最好是直接拷贝粘贴。

细节

picker-options 设定规则：时间范围最大可选择30天, 最晚时间为今天。
element-ui 的日期选择器的组件是 el-date-picker.

设定 pickerOptions2，

 data() {
  return {
   pickerOptions2: {
    disabledDate: theDate => {
     const oneDay = 3600 * 1000 * 24

     const current = theDate.getTime()
     const now = Date.now()

     const condition1 = current > now
     if (!this.minDateTimestamp) return condition1

     const pickerRangeNum = 30

     // 时间范围最大可选择30天,最晚时间为今天
     const lastMonthBegin = this.minDateTimestamp
     const lastMonthEnd = lastMonthBegin + pickerRangeNum * oneDay

     return (
      condition1 || current < lastMonthBegin || current > lastMonthEnd
     )
    },
    onPick: ({ maxDate, minDate }) => {
     this.minDateTimestamp = minDate.getTime()
     if (maxDate) {
      this.minDateTimestamp = 0
     }
    },
   },
  }
 },

模板的设定，

<template>
<el-date-picker
 class="form-item-control"
 v-model="qo2.dateRange2"
 type="daterange"
 range-separator=" 至 "
 start-placeholder="开始日期"
 end-placeholder="结束日期"
 placeholder="请选择时间段"
 :picker-options="pickerOptions2"
/>
</template>

总结

element-ui 动态限定的日期范围选择器，再回首，不用愁。

到此这篇关于element-ui动态限定的日期范围选择器代码片段的文章就介绍到这了,更多相关element-ui动态限定的日期范围选择器代码片段内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解element-ui日期时间选择器的日期格式化问题

    最近在做vue+element-ui的后台管理页面,其中用到了DateTimePicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,在此记录一下解决方案,以免日后再次遇到. 前端页面 前端代码 submitForm(formName) { this.$refs[formName].validate((valid) => { let url = 'http://localhost:8088/pethospital/order-record' let data = qs.

  • 详解element-ui动态限定的日期范围选择器代码片段

    何开此题 我是一个码农,缘起就是这次需求遇到了之前实现过的功能细节,不想再从头翻组件文档实现一遍,最好是直接拷贝粘贴. 细节 picker-options 设定规则:时间范围最大可选择30天, 最晚时间为今天. element-ui 的日期选择器的组件是 el-date-picker. 设定 pickerOptions2, data() { return { pickerOptions2: { disabledDate: theDate => { const oneDay = 3600 * 10

  • 详解Java类动态加载和热替换

    详解Java类动态加载和热替换

    前言 最近,遇到了两个和Java类的加载和卸载相关的问题: 1) 是一道关于Java的判断题:一个类被首次加载后,会长期留驻JVM,直到JVM退出.这个说法,是不是正确的? 2) 在开发的一个集成平台中,需要集成类似接口的多种工具,并且工具可能会有新增,同时在不同的环境部署会有裁剪(例如对外提供服务的应用,不能提供特定的采购的工具),如何才能更好地实现? 针对上面的第2点,我们采用Java插件化开发实现.上面的两个问题,都和Java的类加载和热替换机制有关. 1. Java的类加载器和双亲委派模

  • 详解java JDK 动态代理类分析(java.lang.reflect.Proxy)

    详解java JDK 动态代理类分析(java.lang.reflect.Proxy) /** * JDK 动态代理类分析(java.lang.reflect.Proxy使用) * * @author 张明学 * */ public class ProxyStudy { @SuppressWarnings("unchecked") public static void main(String[] args) throws Exception { // 动态代理类:通用指定类加载器,和接

  • PHP正在进行时-变量详解及字符串动态插入变量

    PHP正在进行时-变量详解及字符串动态插入变量

    在PHP中,变量是$+变量名,变量名遵循标识符的命名规则,可以以字母.下划线开头,可以由数字.下划线.字母组成合法的变量名. 变量声明 所有变量在使用之前应该进行声明,而且最好带上注释,虽然在PHP中可以不显示声明变量.声明变量之后,可以为变量进行赋值:变量的赋值有两种类型值赋值和引用赋值. <?php #合法的声明变量 $_name; $account; $show_title; #赋值 $color="red"; #引用赋值 $user_color=&$color;

  • 详解element上传组件before-remove钩子问题解决

    应公司业务要求已上传文件删除前提醒确认代码如下 if(file && file.status === "success"){ return this.$confirm('此操作将永久删除该文件, 是否继续?', '系统提示',{ confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', center: true }).then(() => { this.$message({ type: 's

  • 详解Java JDK动态代理

    今天来看看Java的另一种代理方式--JDK动态代理 我们之前所介绍的代理方式叫静态代理,也就是静态的生成代理对象,而动态代理则是在运行时创建代理对象.动态代理有更强大的拦截请求功能,因为可以获得类的运行时信息,可以根据运行时信息来获得更为强大的执(骚)行(操)力(作). 我们还是以上一个例子为例,这里的IStars接口和Stars类都不需要修改,只需要修改代理类. 创建JDK动态代理需要先实现InvocationHandler接口,并重写其中的invoke方法,具体步骤如下: 1. 创建一个类

  • 详解Java Cglib动态代理

    今天来介绍另一种更为强大的代理--Cglib动态代理. 什么是Cglib动态代理? 我们先回顾一下上一篇的jdk动态代理,jdk动态代理是通过接口来在运行时动态创建委托类的代理对象,但是跟静态代理一样有一个缺点,就是必须和委托类实现相同的接口,当接口数量增加时,便需要增加代理类的数量才能满足需求,而且如果委托类是别人写的,而且没有实现任何接口,那么jdk动态代理就有些力不从心了. 这时候Cglib动态代理就脱颖而出了,Cglib并不依赖接口,可以直接生成委托类的代理对象,而且可以代理委托类的任意

  • 详解Android studio 动态fragment的用法

    fragment的使用时Android的基础,它有两种用法,第一个就是静态的fragment.第二个则是动态的fragment. 静态fragment直接在layout创建你想要的fragment的XML的文件,然后在你的Java包里面创建对应fragment的class文件 布局代码如下所示 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:

  • 详解Java关于JDK中时间日期的API

    详解Java关于JDK中时间日期的API

    目录 JDK 8中关于日期和时间的API测试 JDK 8 之前日期和时间的API测试 //1.System类中的currentTimeMillis() public void test1(){ long time = System.currentTimeMillis(); //返回当前时间与1970年1月1日0时0分0秒之间以毫秒为时间为单位的时间差. //称为时间戳 System.out.println(time);//1628416744054 } /* java.util.Date类 |-

  • 详解Matlab实现动态表白图的绘制

    详解Matlab实现动态表白图的绘制

    目录 1.幸福和快乐的哲学追问 2.提前祝女朋友节日快乐 2.1 展现 2.2 代码 1.幸福和快乐的哲学追问 在过去的500年间,我们见证了一连串令人惊叹的革命.地球在生态和历史上都已经整合成一个单一的领域.经济呈现指数增长,今日人类所享有的财富在过去只有可能出现在童话里.而科学和工业革命也带给我们超人类的力量,以及几乎可以说无限的能源.不仅社会秩序完全改变,政治.日常生活和人类心理也彻底改观. 只不过,我们真的更快乐了吗?人类在过去5世纪间积蓄的财富,是不是真的让我们找到了新的满足感?有了取

随机推荐