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 ...
随机推荐
- 谈谈OKHttp的几道面试题
来吧,今天说说常用的网络框架OKHttp,也是现在Android所用的原生网络框架(Android 4.4开始,HttpURLConnection的底层实现被Google改成了OkHttp),GOGO ...
- 红帽6.9搭建yum源的2种方式(HTTP和本地)
方式一:HTTP搭建 1.首先删除本身所带的yum `rpm -qa | grep yum | xargs rpm -e --nodeps ` #忽略依赖关系,强行删除 若出现 错误出现 将后面的 ...
- C#5语法新特性
C# 5.NET Framework 4.5 Visual Studio 2012 C#5.0新引进的语法基于.Net Framework 4.5.主要引进的语法:异步与等待,调用方信息 其中最重要的 ...
- C语言重点——指针篇(一文让你完全搞懂指针)| 从内存理解指针 | 指针完全解析
有干货.更有故事,微信搜索[编程指北]关注这个不一样的程序员,等你来撩~ 注:这篇文章好好看完一定会让你掌握好指针的本质 C语言最核心的知识就是指针,所以,这一篇的文章主题是「指针与内存模型」 说到指 ...
- simulink产生周期矩形波和8421码
初次入门simulink,由于学习了数字逻辑,试图进行仿真,首先需要的就是8421码,但是没找到simulink里面相关模块,如果各位知道怎么弄可以评论告诉我分享分享哈哈 我用的是matlab2016 ...
- 嗯,挺全乎儿的,Spring Boot 多环境配置都在这里了,你喜欢哪种?
持续原创输出,点击上方蓝字关注我 目录 前言 Spring Boot 自带的多环境配置 创建不同环境的配置文件 指定运行的环境 Maven 的多环境配置 创建多环境配置文件 定义激活的变量 pom 文 ...
- 痞子衡嵌入式:超级下载算法(RT-UFL)开发笔记(2) - 识别当前i.MXRT型号
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是超级下载算法开发笔记(2)之识别当前i.MXRT型号. 文接上篇 <超级下载算法(RT-UFL)开发笔记(1) - 执行在不同CM ...
- kafka消费者offset存储策略
由于 consumer 在消费过程中可能会出现断电宕机等故障,consumer 恢复后,需要从故 障前的位置的继续消费,所以 consumer 需要实时记录自己消费到了哪个 offset,以便故障恢 ...
- VS2017新建MVC+ORM中的LinqDb访问数据库项目
1.前提概述 ORM对象关系映射(Object-Relational Mapping)是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说,它其实是创建了一个可在编程语言 ...
- 开发工具之Git(一)
目录 一.什么是Git 二.Git基本原理 三.Git用户交互 一.什么是Git 答:Git是一个分布式版本控制软件.另外提一句,它的开发者就是大名鼎鼎的Linux之父Linus. 版本控制,顾名思义 ...