elementUI 选择开始结束日期加限制
需求是开始结束日期不得大于当前时间,当开始日期发生变化时,结束日期不得小于开始日期且不得大于当前日期
<el-form-item label="开始日期:">
<el-date-picker
size="mini"
v-model="form.startDate"
value-format="yyyyMMdd"
type="date"
placeholder="选择开始日期"
:picker-options="pickerBeginDateBefore"
@change="changeTime"
></el-date-picker>
</el-form-item>
<el-form-item label="结束日期:">
<el-date-picker
size="mini"
v-model="form.endDate"
value-format="yyyyMMdd"
type="date"
placeholder="选择结束日期"
:picker-options="pickerBeginDateAfter"
></el-date-picker>
</el-form-item>
data数据展示如下:
// 开始时间disabled
pickerBeginDateBefore: {
disabledDate: time = > {
return time.getTime() > Date.now();
}
},
// 结束时间disabled
pickerBeginDateAfter: {
disabledDate: time = > {
return time.getTime() > Date.now();
}
}, 方法: changeTime() {
let self = this;
self.form.endDate = '';
self.pickerBeginDateAfter = {
disabledDate(time) {
let timeyear = time.getFullYear();
let timemonth = time.getMonth() + 1;
if (timemonth >= 1 && timemonth <= 9) {
timemonth = '0' + timemonth;
}
let timeday = time.getDate();
if (timeday >= 1 && timeday <= 9) {
timeday = '0' + timeday;
}
let currentTime = timeyear.toString() + timemonth.toString() + timeday.toString();
if (currentTime < self.form.startDate || currentTime > self.currentDate) {
return true;
}
}
};
},
getCurrentTimeStr() {
var currentDate = new Date();
var currentTimeStrBefore = null;
var currentTimeStr = null;
var year = currentDate.getFullYear().toString();
var month = (currentDate.getMonth() + 1).toString();
var date = currentDate.getDate().toString();
var dateBefore = (currentDate.getDate() - 1).toString();
currentTimeStrBefore = year + month + dateBefore;
currentTimeStr = year + month + date;
this.currentDate = currentTimeStr;
this.form.startDate = currentTimeStrBefore;
this.form.endDate = currentTimeStr;
},
elementUI 选择开始结束日期加限制的更多相关文章
- winform datetimepacker 开始日期 结束日期 分类: WinForm 2014-07-15 19:14 124人阅读 评论(0) 收藏
dtpStart;//开始日期 dtpEnd;//结束日期 1:开始日期小于结束日期 加载dtpEnd的ValueChanged事件即可. //开始日期小于结束日期 private v ...
- elementui限制开始日期和结束日期
项目需求:开始日期和结束日期 禁用当前日期之前的日期.同时结束日期 禁用开始日期之前的日期 <div class='startTime'> 开始时间:<el-date-picker ...
- ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期
<el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...
- java 和 mysql 获取周 星期 的第一天 最后一天 或者 月的 日期(字符串转日期,日期转字符串,日期加减)
获取周的第一天,最后一天 System.out.println(getStartEndDate("2016-05-01", 1)); 获取星期的第一天和最后一天 System.ou ...
- 结束日期必须大于开始日期--My97DatePicker日历控制的又一方便之处
在做时间查询时,有时需要两个日期,从一个日期到另外一个日期的那种,但是这样会有一个问题,比如后者的结束日期晚于开始日期怎么办?用JS写验证,麻烦,呵呵,用这个日历控件,可方便实现结束日期只显示开始日期 ...
- jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...
- my97datepicker开始日期小于结束日期格式化时间精确届时分秒
my97datepicker开始日期小于结束日期格式化时间精确到时分秒 一 , 需求: 结束时间 > 开始时间, 不符合的时间段不能选择.比如我选择开始日期是7月28,那结束的日期将只能从7月2 ...
- jquery中使用datepicker限制开始日期小于结束日期
这里是使用Jquery插件实现的,这段代码来自于网络.感觉很实用,就做笔记记录下来. 原文:http://blog.csdn.net/tianyacao8025/article/details/707 ...
- PHP计算每月几周,每周的开始结束日期
PHP计算每月几周,每周的开始结束日期 因为项目中需要一个每周工作计算的功能,具体日期的算法是,把每月拆分成几个周,最后一个星期这个月份的天数不够就补上下个月的. 列如今天8月27星期一,这个月有31 ...
- js 处理日期加减
js 处理日期加减 开始时间设置为6点整,若当前时间小于6:00:00,则使用T-1,否则使用T 结束时间设置为T+1的6点整 Date.prototype.format = function(fmt ...
随机推荐
- 如何高效的阅读paper--三遍阅读法
第一遍 1.阅读文章的标题.摘要和介绍 2.阅读每一节的标题和副标题 3.阅读总结 4.浏览参考文献,看看是否有曾经读过的文章 在完成第一遍后,应该做到: 1.能够说出该篇论文的类型 2.能够说出文章 ...
- Mybatis骚操作-通用查询工具类
老项目大多都有对JDBC进行了封装,可以直接执行SQL的工具类,在做项目升级改造的时候(这里仅指整合mybatis),要么全部调整成dao-xml的形式(会有改动代码多的问题,而且看代码时需要xml和 ...
- Unocss使用
目录: 安装 简单使用 自定义规则 安装 { "dependencies": { "unocss": "^0.55.6", "vu ...
- 函数防抖-TS实现
什么是函数防抖? 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时 实现很简单,大体就是设置一个变量来记录定时器,每次触发事件的时候就看定时器是否存在,如果存在清除一下,然后重新开启一 ...
- 贝壳找房携手 Flutter,为三亿家庭提供更好的居住服务 | Flutter 开发者故事
贝壳找房是科技驱动的新居住服务平台,致力于在二手房.新房.租房以及装修等居住领域为三亿家庭提供全方位的品质居住服务.如此庞大的用户群体,自然也有着十分多样和复杂的使用场景和需求.以往使用原生开发模式时 ...
- Go 学习路线图
基础阶段 学习内容: 掌握 Go 的基本语法,包括变量.常量.数据类型(如整数.浮点数.字符串.布尔值.数组.切片.映射等).运算符等. 理解程序的控制流,如条件语句(if-else.switch-c ...
- T2回家(home)题解
T2回家(home) 现在啥也不是了,虽然会了逆元,但是对期望概率题还是一窍不通,赛时相当于只推出了 \(n=1\) 的情况,结果运用到所有情况,理所应当只有20分. 题目描述 小Z是个路痴.有一天小 ...
- Thinkphp原生验证码的使用
Thinkphp原生验证码的使用 一. 获取验证码 public function verifyCode(){ $captcha = new \think\captcha\Captcha(); $ca ...
- CMake 属性之全局属性
[写在前面] CMake 的全局属性是指在 CMake 配置过程中,对整个项目范围生效的设置. 这些属性不同于目标 ( Target ) 属性或目录 ( Directory ) 属性,后者仅对特定的目 ...
- Android性能优化(一)—— 启动优化,冷启动,热启动,温启动
APP启动方式 App启动方式分三种:冷启动(cold start).热启动(hot start).温启动(warm start) ▲ 冷启动 系统不存在App进程(APP首次启动或APP被完全杀死) ...