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 ...
随机推荐
- Python UnboundLocalError: local variable 'xxx' referenced before assignment 解决方法
一.报错含义: val=9 def test(): print(val) val = 6 print(val) test() 翻译:本地变量xxx引用前没有定义. 二.报错原因 这是Python变量作 ...
- margin的讲究
什么元素允许有margin值,无论块状元素还是行内元素都可以,只是各有限制. 先说行内元素,这个是不允许有上下 外边距的, 再说块状元素,上下左右外边距都允许 但是相邻元素的外边距会合并,要注意的是 ...
- linux netfilter ----iptable_filter
内核中将filter模块被组织成了一个独立的模块,每个这样独立的模块中都有个类似的init()初始化函数:首先来看一下filter模块是如何将自己的钩子函数注册到netfilter所管辖的几个hook ...
- 测试_QTP原理
QTP是基于GUI界面的自动化测试工具,用于系统的功能测试. QTP录制的是鼠标和键盘的消息.QTP录制回放时基于windows操作系统的消息机制.QTP在录制时监听应用程序的消息,监听到之后把消 ...
- [LeetCode题解]160. 相交链表 | 双指针 + 哈希表
方法一:双指针 解题思路 假设链表存在相交时,headA 的长度为 a + c,headB 的长度为 b + c.如果把 headA 连上 headB,headB 连上 headB 的话,当遍历这两个 ...
- 面试中AOP这样说,面试官只有一个字:服!
- 蓝鲸平台开启consul.conf UI界面
#第一步: vi /data/bkce/etc/supervisor-consul.conf 修改参数: command=/usr/bin/consul agent -config-file=/dat ...
- IntelliJ IDEA 2019.1.3 x64 简约基本配置
说明:本文针对IntelliJ IDEA 2019.1.3 x64版本,其他版本或许不能准确适用! 1.改变主体背景:Ctrl+Alt+S -> Editor -> Color Schem ...
- 为什么企业需要CRM系统?CRM的作用及其重要性分析
客户管理系统(CRM)是企业核心应用软件之一,对于提高企业业绩起着至关重要的作用,现在很多企业都在客户发展方面投入大量的资金,以求获得更好的回报. 关于CRM CRM是一个客户数据中心,在CRM中,你 ...
- selenium元素定位检查
自动化测试的重点就是定位元素,然而定位元素没办法一步一步运行调试检查,每次都需要从代码的开始运行,检查起来效率极低. 一直想找一个能检查唯一性工具或者方法.百度发现一篇文章https://blog.c ...