ElementUI el-date-picker 限制选中日期前后30天,大于当天不可选
<template>
<el-date-picker v-model="date"
type="daterange"
range-separator="—" align="right"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="onChangeDate">
</el-date-picker>
</template> <script>
export default {
data() {
return {
pickerMinDate:'',
date:[],
pickerOptions:{
onPick: (obj) => {
this.pickerMinDate = new Date(obj.minDate).getTime();
},
disabledDate:(time)=> {
if (this.pickerMinDate) {
const day1 = 30 * 24 * 3600 * 1000
let maxTime = this.pickerMinDate + day1
let minTime = this.pickerMinDate - day1
return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()-1 * 24 * 3600 * 1000
}else{
return time.getTime() > Date.now()+0 * 24 * 3600 * 1000
}
}
}
};
},
created() {
this.getSelectList();
},
computed: {
},
methods: {
onChangeDate(val) {
this.params.StartDate = val[0];
this.params.EndDate = val[1];
if (val) {
this.params.StartDate = val[0];
this.params.EndDate = val[1];
} else {
let StartDate = this.$FormatTime("YYYY-mm-dd",new Date());
let EndTime = this.$FormatTime("YYYY-mm-dd",new Date());
let list = EndTime.split('-');
let EndDate = JSON.stringify((JSON.parse(list[0])+1))+'-'+list[1]+'-'+list[2];
this.params.StartDate = StartDate;
this.params.EndDate = EndDate;
}
}
}
};
</script> <style lang="scss" scoped>
</style>
ElementUI el-date-picker 限制选中日期前后30天,大于当天不可选的更多相关文章
- 在MonthCalendar控件中选中日期
		
Calendar.MONTH Calendar now=Calendar.getInstance();System.out.print(now.get(Calendar.MONTH));得到的月份少1 ...
 - javascript  date picker
		
一个简洁的date picker <html><head><meta http-equiv="Content-Type" content=" ...
 - iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
		
iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...
 - asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天
		
可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...
 - js获取选中日期的当周的周一和周日
		
js获取选中日期的当周的周一和周日 第一种方法(推荐): function getWeekStr(str) { // 将字符串转为标准时间格式 str2 = Date.parse(str); let ...
 - JAVA基础学习之final关键字、遍历集合、日期类对象的使用、Math类对象的使用、Runtime类对象的使用、时间对象Date(两个日期相减)(5)
		
1.final关键字和.net中的const关键字一样,是常量的修饰符,但是final还可以修饰类.方法.写法规范:常量所有字母都大写,多个单词中间用 "_"连接. 2.遍历集合A ...
 - 一起Polyfill系列:让Date识别ISO 8601日期时间格式
		
一.什么是ISO 8601日期时间格式 ISO 8601是国际标准化组织制定的日期时间表示规范,全称是<数据存储和交换形式·信息交换·日期和时间的表示方法>. 示例: 1. 2014-12 ...
 - Date Picker Calendar For Oracle Forms 6i
		
Giving date picker calendar option to user for date type fields in Oracle Forms. I am providing you ...
 - Freebie: Date Picker Calendar Demo Form For Oracle Forms 6i
		
I have already posted and provided the required PLSQL Library and the Calendar FMX file in my previo ...
 
随机推荐
- Elasticsearch 第六篇:聚合统计查询
			
h2.post_title { background-color: rgba(43, 102, 149, 1); color: rgba(255, 255, 255, 1); font-size: 1 ...
 - python xmind转Excel(puppet洛洛原创)
			
需求:将xmind文件转为Excel文件,并添加UI界面操作以降低操作难度. 这个需求一句话就讲清楚了,但实际上还需要做很多工作: 1,了解Xmind文件结构 2,提取Xmind文件分支内容(重点) ...
 - GMP-C/C++(大数库)使用方法
			
The GNU Multiple Precision Arithmetic Library(GNU 高精度算数库)是一个用于任意精度算术的免费库,可处理带符号整数,有理数和浮点数.除了运行GMP机器中 ...
 - Zabbix + Cloud Alert 实践分享
			
前言 如果要问老牌开源监控工具泰斗,当zabbix莫属.之前已分享过 [Kubernetes+Promethues+Cloud Alert实践分享],本篇将继续分享 Zabbix + Cloud Al ...
 - linux后台开发常用调试工具
			
一.编译阶段 nm 获取二进制文件包含的符号信息 strings 获取二进制文件包含的字符串常量 strip ...
 - 数据库Sharding的基本思想和切分策略(转)
			
一.基本思想 Sharding的基本思想就要把一个数据库切分成多个部分放到不同的数据库(server)上,从而缓解单一数据库的性能问题.不太严格的讲,对于海量数据的数据库,如果是因为表多而数据多,这时 ...
 - <连接器和加载器>——概述连接器和加载器
			
0.涉及术语 (1)地址绑定 将抽象的符号与更抽象的符号绑定,如 sqrt 符号与地址 0x0020010绑定. (2)符号解析 程序相互作用通过符号进行,如主程序调用库函数sqrt,连接器通过表明分 ...
 - 一文带你玩转对象存储COS文档预览
			
随着"互联网+"的发展,各行各业纷纷"去纸化",商务合同.会议纪要.组织公文.商品图片.培训视频.学习课件.随堂讲义等电子文档无处不在.而要查看文档一般需要先下 ...
 - 3-colorability
			
目录 1.1 3-colorability 1.1.1 3元可满足规约到3着色 1.1.2 证明充分和必要性 1.1 3-colorability 一个图的三着色问题:要使得边两头的结点颜色互不相同. ...
 - Python pip下载过慢解决方案
			
pip是一个python的包安装与管理工具,安装python时候可以选择是否安装,如果安装了pip可以使用命令查看版本 C:\Users\Vincente λ pip -V pip 19.2.3 fr ...