el-date-picker 实现禁止选择今日以后的日期,以及时间跨度不超过365天,和设置默认选择日期,解决选择当天无效问题

2023-11-03

首先el-date-picker有 :picker-options属性,绑定属性 :picker-options=“pickerOptions”
然后在data中设置需要的数据

data(){
	let secondOfDay = 1000*60*60*24;
	let _minDate = 0;
	return {
		pickerOptions: {
			disabledDate(date) {
				//判断选择了一个日期之后,限定时间跨度为365天
				if (_minDate>0) {
					return date.getTime() > _minDate + 365*secondDay || date.getTime() < _minDate - 365*secondDay || date.getTime() > date.now
				} 
				// 未选择时,单独处理禁止选择当天以后的数据
				else {
					date.getTime() > date.now
				}
			},
			//通过这个方法来监听选择事件
			onPick({ minDate,maxDate }) {
				_minDate = minDate.getTime();
			}
		}
	} 
	
}

ok 上面的实现了,默认时间就更容易了,直接写个方法在mounted调用,本功能实现默认近一周

initDate() {
	let date = new Date();
	let year = date.getFullYear().toString();
	let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
	let day = date.geDate() < 10 ? '0' + date.geDate().toString() : date.geDate().toString();
	let preYear = '';
	let preMonth = '';
	let preDay = '';
	// 日期时7号之前,月份自动-1,如果是1月,那么-1后变成12月,年也-1
	if (date.getDate() < 7) {
		preMonth = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth().toString();
		if (date.getMonth() === 0) {
			preMonth = '12';
			preYear = (date.getFullYear() - 1).toString();
		} else {
			preYear = year;
		}
	} else {
		preMonth = month;
		preYear = year;
		preDay = (date.getDate() - 7) < 10 ? '0' + (date.getDate() - 7).toString() : (date.getDate() - 7).toString();
	}
	let end = year + '-' + month + '-' + day;
	let begin= preYear + '-' + preMonth + '-' + preDay;
	return [begin,end]
}

最后遇到了设置完默认时间,选择当天无效,没法点确定,问题出在组件的default-time属性上,直接去掉,需要时再自己处理即可解决!

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

el-date-picker 实现禁止选择今日以后的日期,以及时间跨度不超过365天,和设置默认选择日期,解决选择当天无效问题 的相关文章

随机推荐

  • 18、计算机图形学——BRDF与渲染方程

    一 BRDF Bidirectional Reflectance Distribution Function 双向反射分布函数 基于https blog csdn net Master Cui article details 1197877
  • 文件上传漏洞攻击与防范方法

    01 文件上传漏洞简介 文件上传漏洞是web安全中经常用到的一种漏洞形式 是对数据与代码分离原则的一种攻击 上传漏洞顾名思义 就是攻击者上传了一个可执行文件如木马 病毒 恶意脚本 WebShell等到服务器执行 并最终获得网站控制权限的高危
  • python接口自动化测试 ( 第一章 )

    python接口自动化测试 第一章 接口自动化测试实战 这是一个从0到1的过程 一步一步搭建的测试接口框架 本教程从开始写框架的思路 和实现过程深入解析 并且深入到了每个相关的的各个细节 不论你是刚入门的菜鸟 还是一个懂编码经验的工程师 相
  • OpenVX嵌入式图像处理(一)硬件平台及软件介绍

    图像处理这几年可谓是大红大紫了一番 尤其是OpenCV的出现让很多之前只有研究者才能使用的算法变成了小白装个库调用个函数就可以解决的问题 但是实时性一直以来都是一个非常头疼的问题 尤其是在嵌入式平台上进行图像处理的门槛一直以来都没有降低 今
  • 关于安装PotPlayer64出现PotPlayer 64 bit need right Try agin的问题

    首先官网下载 官网地址 http www potplayer org 根据自己的操作系统位数随便下载一个 进行安装 出现问题 没用admin权限 这时候你需要进行的操作是把当前窗口关闭 然后选中软件 右键选择以管理员身份运行 切记是以管理员
  • STM32学习笔记(4) 高级定时器-两路互补的PWM输出(带死区和刹车控制)

    目录 1 实验目的 2 实验效果 3 理论部分 3 1时钟源 3 2时基单元 3 3输入捕获 4 程序流程 4 1GPIO初始化结构体 4 2时基初始化结构体 4 3输出比较结构体 4 4刹车和死区结构体的初始化 5 程序源码 1 实验目的
  • roblox虚拟世界怎么做服务器,roblox虚拟世界

    游戏简介 roblox虚拟世界是一款像素风格模拟经营游戏 游戏采用简约的画面风格设定 超大的世界地图可以自由的探索 还可以收集丰富的物品资源进行创造 定制一个专属的秩序 游戏特色 1 游戏采用高清品质的画面 大家开自由的畅玩 2 随时随地一
  • 单片机蓝桥杯--数码管显示

    我们先来看一下蓝桥杯板中数码管部分的电路图 对于动态数码管的控制 是需要有段选和位选的 位选是控制数码管哪一位显示 段选是控制该位显示什么数字 由上图可知 当Y6C有效时 P0控制的是数码管的位 当Y7C有效时 可以给P0写入显示数字的断码
  • RedHat Enterprise下如何配置KVM虚拟机的网络网桥

    RedHat Enterprise下如何配置KVM虚拟机的网络网桥 一 网桥的相关创建命令 1 创建网桥设备 brctl addbr
  • 【Github】目标检测组会内容分享

    组会的内容展示为PPT PDF的形式 讲解目标检测领域比较重要的论文 比如R CNN SPP Net等经典论文 资料已经打包好上传到我的github仓库 仓库地址为 https github com biluko Object detect
  • Java后端内部面试题(前一部分)

    面试题 基础篇 1 Java 语言有哪些特点 1 简单易学 有丰富的类库 2 面向对象 Java 最重要的特性 让程序耦合度更低 内聚性更高 2 面向对象和面向过程的区别 面向过程 是分析解决问题的步骤 然后用函数把这些步骤一步一步地实现
  • python 遇到表情代码出错, 用正则表达式去掉表情代码

    gt gt gt aa U0001f60a adwkdkdkkdk 这里 U0001f60a 这是表情的代码 带这个 gt gt gt import re gt gt gt cc re compile r U0001f60a cc 就是需要
  • 小程序授权登录最新解决方案

    小程序授权登录最新解决方案 一 在WXML中设置单击事件 也可以直接放在第一个页面的ONLOAND函数中 用户进入小程序后自动弹出 二 在JS中设置Button的触发代码 三 演示 一 在WXML中设置单击事件 也可以直接放在第一个页面的O
  • SmartForms取消Word编辑器 恢复文本编辑器

    导语 在目前最新版本的 S 4 HANA 1909和2021版本中 SmartForms的文本编辑器改成了嵌套Word 而不是直接修改文本框的形式 这给很多电脑配置不是很高 或者Word兼容性有问题的开发带来了困难 下面说一下如何恢复到文本
  • Ruoyi用户菜单权限

    若依用户菜单权限 后端实现 首先如果想先要实现菜单权限 那么得现在后端添加一个与之对应的权限字段 这样就有权限字段了 前端实现 前端得需要调用这个权限字段的按钮 调用该权限字段的按钮 点击事件 接口请求 若依前端功能 这里得需要在ruoyi
  • page table 改进之 反置页表

    页表是把所有的逻辑页面放到一起 但随着进程的增加 逻辑页面会迅速增长 有多少页面页表就会有多少项 那么不变的是物理内存 为什么不给物理内存编号记录每一块存放了哪个进程呢
  • 【图像处理】图像检索的三种python实现(直方图/OpenCV/哈希法)

    简介 本文介绍了图像检索的三种实现方式 均用python完成 其中前两种基于直方图比较 哈希法基于像素分布 检索方式是 提前导入图片库作为检索范围 给出待检索的图片 将其与图片库中的图片进行比较 得出所有相似度后进行排序 从而检索结果为相似
  • 《互联网程序设计(Java)》——课程笔记10:Http程序设计

    1 概论 HTTP系统包括客户端软件 浏览器 和服务器软件 HTTP服务器 早期的客户端软件 其主要工作可理解为文件下载和文件显示 实际上现代的HTTP客户端比文件下载要复杂得多 它包括网页文件的下载 跨平台的本地显示 参数的传递 动态网页
  • python爬虫Scrapy框架笔记分享12-Splash 的使用

    1 Splash介绍 Splash是一个JavaScript渲染服务 是一个带有HTTP API的轻量级浏览器 同时它对接了Python中的Twisted和QT库 利用它 我们同样可以实现动态渲染页面的抓取 2 安装 2 1 安装docke
  • el-date-picker 实现禁止选择今日以后的日期,以及时间跨度不超过365天,和设置默认选择日期,解决选择当天无效问题

    首先el date picker有 picker options属性 绑定属性 picker options pickerOptions 然后在data中设置需要的数据 data let secondOfDay 1000 60 60 24