el-date-picker 的时间范围跨度设置

2023-11-05

<template>
  <div>
    <div class="block">
      <h2>日期 365 天</h2>
      <el-date-picker
        :picker-options="pickerOptions1"
        v-model="value1"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
    </div>
    <div class="block">
      <h2>月份 12 个月</h2>
      <el-date-picker
        :picker-options="pickerOptions2"
        v-model="value2"
        type="monthrange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerMinDate1: "",//第一次选中的时间
      value1: "",
      pickerOptions1: {
        onPick: obj => {
          this.pickerMinDate1 = new Date(obj.minDate).getTime();
        },
        disabledDate: time => {
          if (this.pickerMinDate1) {
            const day1 = 365 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate1 + day1;
            let minTime = this.pickerMinDate1 - day1;
            return time.getTime() > maxTime || time.getTime() < minTime;
          }
        }
      },
      
      pickerMinDate2: "",//第一次选中的时间
      value2: "",
      pickerOptions2: {
        onPick: obj => {
          this.pickerMinDate2 = new Date(obj.minDate).getTime();
        },
        disabledDate: time => {
          if (this.pickerMinDate2) {
            const day2 = 365 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate2 + day2;
            let minTime = this.pickerMinDate2 - day2;
            return time.getTime() > maxTime || time.getTime() < minTime;
          }
        }
      },
    };
  },
  mounted() {
    
  },
  methods: {
    dateChange() {
      console.log(this.value1[0], '-----', this.value1[1]);
    }
  },
};
</script>
<style scoped>
</style>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-date-picker 的时间范围跨度设置 的相关文章

随机推荐

  • 深度学习------不同方法实现Inception-10

    本博客通过tensorflow实现inception10模型 对于inception10模型有不同的写法 包括 sequence模型 类封装 自定义函数 而本博客主要通过自定义函数和类封装实现inception10 代码和模块图如下 inc
  • 基于echarts 做的男女比例

    data数据 maleToFemaleRatio FemaleNumber 28417 FemaleRadio 45 17 MaleNumber 34491 MaleRadio 54 83 完整代码 var myChart echarts
  • 面试题 04.02. 最小高度树

    面试题 04 02 最小高度树 给定一个有序整数数组 元素各不相同且按升序排列 编写一个算法 创建一棵高度最小的二叉搜索树 示例 给定有序数组 10 3 0 5 9 一个可能的答案是 0 3 9 10 null 5 它可以表示下面这个高度平
  • 在ch32v307单片机上移植LUA

    下载lua源代码 先到官网下载lua源代码 http www lua org 然后解压出源码 源码移植 这里基于官方例程中的串口例程进行移植 USART Printf例程 使用MounRiver Studio该工程 然后添加lua源码 需要
  • 说说对 Node 中的 Buffer 的理解?应用场景?

    一 是什么 在Node应用中 需要处理网络协议 操作数据库 处理图片 接收上传文件等 在网络流和文件的操作中 要处理大量二进制数据 而Buffer就是在内存中开辟一片区域 初次初始化为8KB 用来存放二进制数据 在上述操作中都会存在数据流动
  • Android Studio 安装 SDK 失败

    https blog csdn net zdw wym article details 74942772 utm source tuicool utm medium referral
  • 计算机端口详解

    计算机端口详解 一 摘要 端口是个网络应用中很重要的东西 相当于 门 了 二 什么是端口 在 Internet上 各主机间通过TCP TP协议发送和接收数据报 各个数据报根据其目的主机的ip地址来进行互联网络中的路由选择 可见 把数据报顺
  • 【C语言】如何只打印小数的有效数字位数且不补0

    我们时常会碰到使用printf打印小数但只想显示该小数有有效数字的小数位数 这时使用float或者double类型打印时往往会出现以下情况 但是如果我们不想打印39 5之后的小数 那么就需要将c语言中printf语句中的 f 表示十进制浮点
  • pipreqs——快捷生成一个Python项目的依赖模块requirements.txt

    依赖模块文件快捷生成requirements txt 解决代码复用过程中 低效环境配置的问题 使用步骤 1 安装pipreqs pip install i https pypi tuna tsinghua edu cn simple pip
  • Tomcat的优化

    Tomcat作为一款常用的web容器 对其进行优化是提升性能的重要手段 对其进行优化可以从以下方面入手 调整内存 调整线程池 Executor 调整连接器 Connector 调整运行模式 调整内存 如果内存设置过小 极有可能导致项目无法启
  • 头条移动端项目Day07 —— app端文章搜索

    作者主页 欢迎来到我的技术博客 个人介绍 大家好 本人热衷于Java后端开发 欢迎来交流学习哦 如果文章对您有帮助 记得关注 点赞 收藏 评论 您的支持将是我创作的动力 让我们一起加油进步吧 文章目录 app端文章搜索 1 本章内容介绍 1
  • 通过图数据库 Neo4J 建立疫情行动轨迹及接触关系图

    最近疫情反复 我被为拜托建一张 某某行动轨迹及接触关系图 这类行动轨迹或接触关系 可以抽象成网或者图 从这类图结构立刻就会联想到图数据库Neo4J 正好并没有在公司电脑上安装和使用过Neo4J 于是在这里简单记录下 整个过程还是非常简单的
  • 硅谷撑不住了?200多家美国科技公司裁员1.8万人

    点击上方 AI遇见机器学习 选择 星标 公众号 重磅干货 第一时间送达 疫情之下 硅谷巨头们快撑不住了 据Layoffs fyi称 自3月初以来 美国科技公司迎来多次大规模的裁员 自新冠病毒在欧美肆虐以来 Layoffs fyi一直在追踪初
  • windows下游戏服务器端框架Firefly安装说明及demo运行

    本来公司一个网游服务器端选定了pomelo框架 后来出了个Firefly 为做一个对比 决定研究一下Firefly 看了一下Firefly 感觉头大 python的 本人python小白 只好慢慢折腾 一天下来总算装上了Firefly框架
  • android:layout_weight的真实含义

    首先声明只有在Linearlayout中 该属性才有效 之所以android layout weight会引起争议 是因为在设置该属性的同时 设置android layout width为wrap content和match parent会
  • SimSwap代码精析对应论文Pipeline【Identity Extractor以及loss的计算,Encoder,ID Injection Module,Decoder】

    SimSwap代码精析对应论文Pipeline Identity Extractor以及loss id的计算 Encoder ID Injection Module Decoder 0 前言 1 先看Inference的Pipeline I
  • leetcode 14-最长公共前缀 python

    编写一个函数来查找字符串数组中的最长公共前缀 如果不存在公共前缀 返回空字符串 示例 1 输入 flower flow flight 输出 fl 示例 2 输入 dog racecar car 输出 解释 输入不存在公共前缀 可以使用enu
  • K阶斐波那契数列--------西工大NOJ习题.10

    K阶斐波那契数列 西工大NOJ习题 10 原创不易 转载请说明出处 科普 k阶斐波那契数列的0到n 1项需要有初始值 其中 0到n 2项初始化为0 第n 1项初始化为1 在这道题目中 所引用的函数详见 数据结构实现 循环队列 我的一篇博文
  • 找不到模块“../views/HomeView.vue”或其相应的类型声明。

    找不到模块 views HomeView vue 或其相应的类型声明 我们再新建项目中可以看到这个文件 这个时候我们再里面添加这段代码 declare module vue import App defineComponent from v
  • el-date-picker 的时间范围跨度设置