el-date-picker 限制选择范围最大为一年,设置快捷选项,设置默认时间

el-date-picker 限制选择范围最大为一年:

主要代码为::picker-options="pickerOptions" 以及 @blur="pickerBlur"

        <el-date-picker
          v-model="transactionTime"
          type="daterange"
          style="width: 200px"
          size="small"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :picker-options="pickerOptions"
          clearable
          @blur="pickerBlur"
        />

设置快捷选项,设置禁用选项方法:

data() {
    return {
      transactionTime: null,
      pickDate: '', // 存放getPickDate获取的数据
      pickerOptions: {
        onPick: this.getPickDate,
        disabledDate: this.disabledDate,
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
    };
  },

设置禁用选项的方法(限制选择范围最大为一年):

  methods: {
    getPickDate(pick) {
      this.pickDate = pick
    },
    disabledDate(date) {
      const { minDate, maxDate } = this.pickDate
      if (minDate && !maxDate) {
        const diff = Math.abs(minDate.valueOf() - date.valueOf())
        // 日期选择范围不能大于一年
        if (diff > 1000 * 3600 * 24 * 365) {
          return true
        }
      }
    },
    pickerBlur(val) {
      this.pickDate = '' // 清空getPickDate获取的数据
    },
  }

设置 transactionTime 最开始的默认时间为三个月:

  created() {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
    this.transactionTime = [this.parseTime(start, '{y}-{m}-{d}'), this.parseTime(end, '{y}-{m}-{d}')]
  },

 其中parseTime方法为:

// 日期格式化
export function parseTime(time, pattern) {
	if (arguments.length === 0 || !time) {
		return null
	}
	const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
	let date
	if (typeof time === 'object') {
		date = time
	} else {
		if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
			time = parseInt(time)
		} else if (typeof time === 'string') {
			time = time.replace(new RegExp(/-/gm), '/');
		}
		if ((typeof time === 'number') && (time.toString().length === 10)) {
			time = time * 1000
		}
		date = new Date(time)
	}
	const formatObj = {
		y: date.getFullYear(),
		m: date.getMonth() + 1,
		d: date.getDate(),
		h: date.getHours(),
		i: date.getMinutes(),
		s: date.getSeconds(),
		a: date.getDay()
	}
	const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
		let value = formatObj[key]
		// Note: getDay() returns 0 on Sunday
		if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
		if (result.length > 0 && value < 10) {
			value = '0' + value
		}
		return value || 0
	})
	return time_str
}

如果重置搜索条件时需要重置回默认时间,记得重置方法内也要写入默认时间:

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = this.$options.data().queryParams
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      this.queryParams.transactionTime = [this.parseTime(start, '{y}-{m}-{d}'), this.parseTime(end, '{y}-{m}-{d}')]
      this.handleQuery()
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/241378.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解决maven报错 ‘parent.relativePath‘ of POM

错误提示 parent.relativePath of POM io.renren:renren-fast:3.0.0 (D:\wzyProjets\gulimail\renren-fast\pom.xml) points at com.wzy.gulimail:gulimail instead of org.springframework.boot:spring-boot-starter-parent, please verify your project structure错误分析 子…

一步解决 Required request body is missing: public com.xxx.xxx

1.问题描述   调用接口时报错   Required request body is missing: public com.xxx.CommonResult<com.xxx.CommonPage<com.xxx.ContractListVo>> com.xxx.ContractController.list(com.xxx.ContractSearchVo,com.xxx.PageParam) 2.原因分析   get请求接口使…

为何企业如此易泄密?挖掘数据泄露的主要原因

全球信息数字化的不断扩大&#xff0c;使数据安全成为企事业单位持续发展的命脉和保持市场竞争力的核心要素。然而&#xff0c;由于企业数据泄露事件的不断上演&#xff0c;也让企业数据安全的保护局势不容乐观。 下面&#xff0c;就让我们一同来盘点&#xff0c;企业数据泄露…

Ubuntu22.04切换用户

一、只有一个用户时没有切换用户菜单项 1、用户信息 cat /etc/passwd 2、系统菜单 二、添加用户 添加新用户ym&#xff0c;全名yang mi 三、有两个及以上的用户时出现切换用户菜单项 1、用户信息 cat /etc/passwd 2、系统菜单 四、切换用户 1、点击上图中Switch User …

ChatGLM3-6B和langchain知识库阿里云部署

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、ChatGLM3-6B部署搭建环境部署GLM3 二、Chatglm2-6blangchain部署本地知识库三、Tips四、总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&am…

深度学习基本概念

1.全连接层 全连接层就是该层的所有节点与输入节点全部相连&#xff0c;如图所 示。假设输入节点为X1&#xff0c; X 2&#xff0c; X 3&#xff0c;输出节点为 Y 1&#xff0c; Y 2&#xff0c; Y 3&#xff0c; Y 4。令 矩阵 W 代表全连接层的权重&#xff0c; W 12也就代表 …

如何在 1 天内将网站打造为手机app

为您的网站提供移动应用程序的重要性怎么强调都不为过。随着用户越来越依赖智能手机和平板电脑进行在线活动&#xff0c;将您的网站转变为移动手机app可以显着增强用户体验、提高参与度并扩大您的在线影响力。在这篇博客中&#xff0c;我们将探讨如何快速有效地将网站制作成移动…

【广州华锐视点】物流数字孪生三维可视化系统打造更高效、智能的物流管理体验

在当今快速发展的物流行业中&#xff0c;传统的管理和监控方法往往难以满足复杂运营的需求。为了解决这个问题&#xff0c;广州华锐互动提供物流数字孪生三维可视化系统定制开发服务&#xff0c;打造更为高效、智能的物流管理体验。 物流数字孪生三维可视化系统是一种基于虚拟现…

Java_mybatis-结果集映射-ResultTypeResultMap

Mybatis返回值接收 可以使用两种方式进行参数的接收 resultTyperesultMap 这两种分别都是需要在Mapper.xml文件中去设置的 当结果是一个简单的对象或者list或者map&#xff0c;对象中没有嵌套对象&#xff0c;或者集合时&#xff0c;就可以直接使用resultType 反之如果需要…

记账本选择标签选择时间,计算器---记录一下

html部分 <template><view class"pages-main"><!-- 标题栏 --><!-- #ifndef MP-TOUTIAO --><view class"" :style"height:barHeight px;"></view><!-- #endif --><!-- #ifdef MP-TOUTIAO -->&…

node.js安装和配置

软件介绍 Node.js是一个免费的、开源的、跨平台的JavaScript运行时环境&#xff0c;允许开发人员在浏览器之外编写命令行工具和服务器端脚本。 Node.js是一个基于Chrome JavaScript运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境&#xff0c;基于Googl…

Java连接数据库的各种细节错误(细节篇)

目录 前后端联调&#xff08;传输文件&#xff09; ClassNotFoundException: SQLException: SQL语法错误: 数据库连接问题: 驱动问题: 资源泄露: 并发问题: 超时问题: 其他库冲突: 配置问题: 网络问题: SSL/TLS问题: 数据库权限问题: 驱动不兼容: 其他未知错误…

祝贺!2023美丽汉字小达人市级比赛和区级自由报名获奖名单发布

昨天&#xff0c;汉字小达人的主办方《中文自修》杂志社在官网发布了两个公示&#xff1a;《“中文自修杯”第十届上海市小学生“美丽汉字小达人”市级活动获奖名单公示》、《“中文自修杯”第十届上海市小学生“美丽汉字小达人”区级活动“自由报名”获奖名单公示》。 这两份名…

在虚拟机的Windows操作系统中:通过Jar方式若依项目,以及在外部的访问!

&#x1f4da;&#x1f4da; &#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; ​​ &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Windows》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有…

SCA面面观 | 五大维度提升,让SCA产品走向成熟

随着开源软件的迅速崛起&#xff0c;特别是在2021年SolarWinds和Log4j漏洞事件引发全球关注后&#xff0c;软件成分分析&#xff08;Software Composition Analysis&#xff0c;简称SCA&#xff09;越来越受到业界的重视。SCA产品已经逐渐成为企业软件供应链资产管理、漏洞管理…

【UE 材质】切换颜色、纹理时的过渡效果

效果 步骤 1. 新建一个工程&#xff0c;创建Basic关卡 2. 创建一个材质&#xff0c;这里命名为“M_Plane”&#xff0c;打开这个材质&#xff0c;在材质图表中添加如下节点 注意“Noise”节点中的函数选择“Voronoi” 3. 对材质“M_Plane”创建材质实例 4. 在场景中放置一个平…

Java_Mybatis_缓存

缓存 1.概述 Mybatis 缓存&#xff1a;MyBatis 内置了一个强大的事务性查询缓存机制&#xff0c;它可以非常方便地配置和定制 2.会话缓存&#xff08;一级缓存&#xff09; sqlSession 级别的&#xff0c;也就是说&#xff0c;使用同一个 sqlSession 查询同一 sql 时&#x…

Impala4.x源码阅读笔记(二)——Impala如何高效读取Iceberg表

前言 本文为笔者个人阅读Apache Impala源码时的笔记&#xff0c;仅代表我个人对代码的理解&#xff0c;个人水平有限&#xff0c;文章可能存在理解错误、遗漏或者过时之处。如果有任何错误或者有更好的见解&#xff0c;欢迎指正。 Iceberg表是一种用于存储大规模结构化数据的…

Vue指令之v-on

v-on指令用于注册事件&#xff0c;作用是添加监听与提供事件触发后对应的处理函数。 v-on有两种语法&#xff0c;在提供处理函数的时候既可以直接使用内联语句&#xff0c;也可以提供函数的名字。 第一种语法是直接提供内联语句&#xff0c;如下 v-on:事件名 "内联语句…

外贸SOHO建站教程?海洋建站推广如何做?

外贸SOHO建站推广的步骤&#xff1f;国际贸易网站建设方法&#xff1f; 随着互联网的普及和发展&#xff0c;越来越多的外贸SOHO从业者选择通过建立自己的网站来拓展业务。那么&#xff0c;如何搭建一个专业、高效的外贸网站呢&#xff1f;海洋建站将为您提供一份详细的外贸SO…