<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天,大于当天不可选的更多相关文章

  1. 在MonthCalendar控件中选中日期

    Calendar.MONTH Calendar now=Calendar.getInstance();System.out.print(now.get(Calendar.MONTH));得到的月份少1 ...

  2. javascript date picker

    一个简洁的date picker <html><head><meta http-equiv="Content-Type" content=" ...

  3. iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

    iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...

  4. asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天

    可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...

  5. js获取选中日期的当周的周一和周日

    js获取选中日期的当周的周一和周日 第一种方法(推荐): function getWeekStr(str) { // 将字符串转为标准时间格式 str2 = Date.parse(str); let ...

  6. JAVA基础学习之final关键字、遍历集合、日期类对象的使用、Math类对象的使用、Runtime类对象的使用、时间对象Date(两个日期相减)(5)

    1.final关键字和.net中的const关键字一样,是常量的修饰符,但是final还可以修饰类.方法.写法规范:常量所有字母都大写,多个单词中间用 "_"连接. 2.遍历集合A ...

  7. 一起Polyfill系列:让Date识别ISO 8601日期时间格式

    一.什么是ISO 8601日期时间格式 ISO 8601是国际标准化组织制定的日期时间表示规范,全称是<数据存储和交换形式·信息交换·日期和时间的表示方法>. 示例: 1. 2014-12 ...

  8. 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 ...

  9. 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 ...

随机推荐

  1. Simulink代码自动生成(一)

    前面介绍了MDB的设计思想并对比了它和传统的嵌入式软件开发之间的差异,现在开始使用Simulink工具演示模型的搭建和C代码的自动生成过程. Matlab版本:R2018B 一.算法模型的搭建 搭建一 ...

  2. 深入IOC及其启动原理

    IOC总结 1. IOC概述 三个问题: IOC是什么 为什么用它 怎么用 1.1 是什么? 两个概念:控制反转,依赖注入 来看一下传统的干活方式:在对象单一职责原则的基础上,一个对象很少有不依赖其他 ...

  3. Loadrunner11简单压测接口教程

    一.需求 使用Loadrunner压测目标接口,要求支持1000并发数. 目标接口:https://www.xxx.com/digitaldata/api/signer/1.0/signerRegis ...

  4. MongoDB基础教程(安装、操作、配置)

    MongoDB 下载安装 简易安装 # redhat, centOS sudo yum install -y mongodb # debian, ubuntu sudo apt install -y ...

  5. mysql 触发器的创建和使用

    什么是触发器 触发器(TRIGGER)是MySQL的数据库对象之一,从5.0.2版本开始支持.该对象与编程语言中的函数非常类似,都需要声明.执行等.但是触发器的执行不是由程序调用,也不是由手工启动,而 ...

  6. shell编程之awk

    awk是一种用于处理数据和生成报告的编程语言 awk可以在命令行中进行一些简单的操作,也可以被写成脚本来处理较大的应用问题 awk与grep.sed结合使用,将使shell编程更加容易 awk工作模式 ...

  7. rgw实现nfs的首测

    功能介绍 关于rgw实现nfs接口这个,刚接触的人可能并不清楚这个是个什么样的服务架构,rgw是ceph里面的对象存储接口,而nfs则是纯正的网络文件系统接口,这二者如何结合在一起,关于这个,有几个相 ...

  8. Go 语言设计哲学之四:项目布局-你如何设计项目结构

    在多年的 Go 语言实践积累后逐渐形成了一种典型项目结构,如下图所示: 上面就是一个支持构建二进制可执行文件(在 src 下)的典型 Go 项目的结构. 1 src 目录: 存放项目要编译构建的可执行 ...

  9. WPF控件库总结

    前言 在使用WPF项目的时候, 一般首要的就是对UI部分的选型, 而WPF相关的UI控件和样式库在Githu也是非常多. 关于UI的部分,可以分为二种: 对控件本身没有很大的需求, 只需要在原有的基础 ...

  10. SQL SERVER中 DBLINK的实现

    不同服务器数据库之间的数据操作 --创建链接服务器 exec sp_addlinkedserver'ITSV' ,'' , 'SQLOLEDB' ,'远程服务器名或ip地址' exec sp_addl ...