<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. 联发科Mediatek工业路由芯片上网稳定低功耗的Router模块WiFi中继——无线AP定制方案

    Router模块又名路由器模块,是指将路由器的接口类型及部分扩展功能是可以根据实际需求来进行无线接入服务,允许其他无线设备接入,通过局域无线端或联网远程端,进行数据访问,对无线设备进行远程控制.常见的 ...

  2. 使用 Xunit.DependencyInjection 改造测试项目

    使用 Xunit.DependencyInjection 改造测试项目 Intro 这篇文章拖了很长时间没写,之前也有介绍过 Xunit.DependencyInjection 这个项目,这个项目是由 ...

  3. How to get last SysExcelWorksheet object row or column[X++]

    findLastColumn int findLastColumn(SysExcelWorksheet _sysExcelWorksheet, boolean _data = true) { #Exc ...

  4. c语言博客作业——顺序结构,分支结构

    1.PTA截图 2.本章学习总结 2.1学习内容总结 数据的输入和输出:%d表示输入输出整数 %.lf表示输入浮点数 %.nf表示输出结果保留n位小数 if-else的分支结构可以有限个分类情况进行处 ...

  5. leetcode17gas-station

    题目描述 环形路上有n个加油站,第i个加油站的汽油量是gas[i]. 你有一辆车,车的油箱可以无限装汽油.从加油站i走到下一个加油站(i+1)花费的油量是cost[i],你从一个加油站出发,刚开始的时 ...

  6. leetcode146 longest-substring-without-repeating-character

    题目描述 给定一个字符串,找出最长的不具有重复字符的子串的长度.例如,"abcabcbb"不具有重复字符的最长子串是"abc",长度为3.对于"bbb ...

  7. C++常见的面试题目整理

    本文列出C++面试中经常遇到的一些问题,都是一些常见的面试考点,如果后续遇到其他常见面试问题还会再次更新.希望对近期参加面试的同学有一些帮助.先后顺序与问题的重要性无关,查看的时候,最好是全面了解一下 ...

  8. Golang中的OO(面向对象)

    组合 > 继承 Go中的设计,以为继承的被诟病,所以Golang的设计团队在语言的设计时并没有采用经典的OO模式 那Golang中各个部分是怎么联系到一起的呢 type ReadWriter i ...

  9. 没找到Wkhtmltopdf,报表会被显示为html

    windows10 odoo 打印报表时提示 没找到Wkhtmltopdf,报表会被显示为html 现象 原因 没有安装Wkhtmltopdf,没有配置环境变量,odoo在电脑系统中找不到Wkhtml ...

  10. ERP出入库进阶操作与子流程--开源软件诞生28

    赤龙ERP出入库进阶讲解--第28篇 用日志记录"开源软件"的诞生 [进入地址 点亮星星]----祈盼着一个鼓励 博主开源地址: 码云:https://gitee.com/redr ...