前言

datepicker限制日期只能选择7天又两种方式。
一：限制控件的其实是否可用，只能限制当前日期前7天或后7天
二：限制所选天数小于7天，多出提示

一、限制控件是否可用，可选日期为当前日期的前7天或后7天？

1.控件

代码如下（示例）：

利用属性:picker-options="pickerDisabled"

<el-date-picker v-model="queryData.loginTime" value-format="yyyyMMddHHmmss" type="datetimerange" :clearable="false"
:picker-options="pickerDisabled" :default-time="['00:00:00', '23:59:59']"
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

2.实现代码

这里是前7天，后7天改变结束日期的值

代码如下（示例）：

 return {// 日期的限制条件pickerDisabled: {disabledDate: (time) => {//大于当天不能选择if(time.getTime()>Date.now()){return true;}//小于天不允许选择let sdate = new Date();let day=7;sdate.setTime(sdate.getTime() - 3600 * 1000 * 24 * day);if(time.getTime()<sdate.getTime()){return true;}return false;},},
}

二、限制所选天数小于7天，大于提示

1.控件

利用方法: @change="datechange"

代码如下（示例）：

<el-date-picker v-model="queryData.loginTime" value-format="yyyyMMddHHmmss" type="datetimerange" :clearable="false":picker-options="pickerDisabled" :default-time="['00:00:00', '23:59:59']"start-placeholder="开始日期" end-placeholder="结束日期" @change="datechange">
</el-date-picker>

2.实现代码

代码如下（示例）：

datechange(){// 从配置项S0031中去默认查询天数let mrdays=this.$config.getConfigItemValue(this.$config.systemConfig.lslkcxrqlzdz).split(',')[1];// 所选日期差let day=this.$utilDate.getday(this.queryData.loginTime[1],this.queryData.loginTime[0]);if(day>mrdays){this.$message({message: '所选日期查询范围大于配置项'+mrdays+'天，请重新选择',type: 'warning'});this.queryData.loginTime=[];}},

14位日期相减得天数方法

// 14位日期相减得天数
const getday=(sdate,edate)=>{if(sdate && edate){let sdatetime=new Date(dateFtt(dateOriginal(sdate), 'yyyy/MM/dd HH:mm:ss')).getTime();let ddatetime=new Date(dateFtt(dateOriginal(edate), 'yyyy/MM/dd HH:mm:ss')).getTime();return parseInt((sdatetime-ddatetime)/1000/60/60/24);}
}

datepicker 限制只能选择7天的两种方式相关推荐

android 图片方法,分享实现Android图片选择的两种方式
Android选择图片的两种方式: 第一种:单张选取通过隐式启动activity,跳转到相册选择一张返回结果关键代码如下: 发送请求: private static final int PICTU ...
关于个人独资企业、自然人代开核定征收两种方式如何选择？
个人独资企业和自然人代开这两种方式的核定征收,两者虽然都是核定征收,但是还有不少区别的,如何选择呢? 近期有不少朋友,企业负责人都在咨询相关的信息,公司和公司.公司和公司以外的个人业务等,没有进项成本 ...
说一个奇奇怪怪的知识点，uniapp,公众号页面，uni.chooseImage只能相机或者相册选，不能同时使用两种方式sourceType:['camera','album']...
由于自身认为这是一个小功能,于是没怎么细心吧然后客户之前需要的是只能拍照上传,测试截图看到是有两种方式可选择的于是我改为了sourceType:['camera''] 一种方式上传.但是另一个选择 ...
kubernetes创建资源的两种方式
一.创建方式分类: 命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1.用 kubectl 命令行的方式直接创建,比如: kubectl run httpd-app --image ...
WebService的两种方式SOAP和REST比较 (转)
由于第一次接触WebService,对于很多概念不太理解,尤其是看到各个OpenAPI的不同提供方式时,更加疑惑.如google map api采用了AJAX方式,通过javascript提供API, ...
实现日志管理的两种方式：aop、拦截器
一.Spring aop 实现 AOP概念: 切面(Aspect):一个关注点的模块化,这个关注点可能会横切多个对象.事务管理是Java应用程序中一个关于横切关注点的很好的例子.在Spring AOP ...
spring中AOP动态代理的两种方式
AOP动态代理的两种方式 Spring AOP动态代理的方式(spring的AOP默认是JDK Proxy) 浅谈这两种动态代理 JDK的动态代理,需要有实现接口动态代理--JDK Proxy ⚫ ...
linux中安shell怎么传入参数,【linux】linux 下 shell命令执行结果赋值给变量【两种方式】...
方法1:[通用方法] 使用Tab键上面的反引号例子如下: find命令模糊查询在/apps/swapping目录下查找文件名中包含swapping并且以.jar结尾的文件使用反引号引住命令 ...
指针数组下标JAVA_Java语言中可用下标和指针两种方式表示数组元素。
[判断题]一行可以写多条预处理命令 [判断题]如果一个java程序中有多个类,编译后只生成一个字节码文件,其名字同主类名一致. [判断题]Protected类型的实例变量只能在本类中使用,其他类中不可 ...

datepicker 限制只能选择7天的两种方式

前言

一、限制控件是否可用，可选日期为当前日期的前7天或后7天？

1.控件

2.实现代码

二、限制所选天数小于7天，大于提示

1.控件

2.实现代码

datepicker 限制只能选择7天的两种方式相关推荐

最新文章

热门文章