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 ...
随机推荐
- iptables基础原理和使用简介
概念简介 名称 Netfilter/iptables模块有两部分组成: Netfilter框架以及iptables,iptables又分为iptables(内核空间)和iptables命令行工具(用户 ...
- Inception系列之Batch-Normalization
训练深度神经网络非常复杂,因为在训练过程中,随着先前各层的参数发生变化,各层输入的分布也会发生变化,图层输入分布的变化带来了一个问题,因为图层需要不断适应新的分布,因此训练变得复杂,随着网络变得更深, ...
- IDEA安装leetcode editor插件
leetcode > https://leetcode-cn.com/ 本地idea刷题可以直接同步提交,测试等相关操作 需要安装leetcode editor插件 1.idea setting ...
- maven安装配置及其在IDEA和eclipse开发软件中配置
1.maven下载安装 1.1.前往https://maven.apache.org/download.cgi下载最新版的Maven程序: 1.2.解压到本地,并配置环境变量 (1)path中添加 ( ...
- 1-03 Java的基本程序设计结构
1-03 Java的基本程序设计结构 3.1 & 3.2 在一个单词中间使用大写字母的方式称为骆驼命名法.以其自身为例,应该写成CamelCase). 与C/C++一样,关键字void表示这个 ...
- 【译】Arc 在 Rust 中是如何工作的
原文标题:How Arc works in Rust 原文链接:https://medium.com/@DylanKerler1/how-arc-works-in-rust-b06192acd0a6 ...
- 不要再说不会Spring了!Spring第一天,学会进大厂!
工作及面试的过程中,作为Java开发,Spring环绕在我们的身边,很多人都是一知半解,本次将用14天时间,针对容器中注解.组件.源码进行解读,AOP概念进行全方面360°无死角介绍,SpringMV ...
- Linux 文本处理批量查找与替换
# 搜索含有特定字符串在某个目录并打印出文件名grep -rl "www.baidu.com" /data* -r, --recursive like --directories= ...
- kali 系列学习09-Kali-linux设置ProxyChains
ProxyChains是Linux和其他Unices下的代理工具.它可以使任何程序通过代理上网,允许TCP和DNS通过代理隧道,支持HTTP.SOCKS4和SOCKS5类型的代理服务器,并且可配置多个 ...
- CSRF和XSS的区别
XSS是啥? xss就是跨域脚本攻击 什么是跨域脚本攻击? 就是在正常的输入框中(如:用户名修改等)插入script恶意代码,从而在你遍历数据的时候加载该js文件, 获取你的cookie或sessio ...