elementui的时间选择器开始时间和结束时间的限制
开始时间不能大于结束时间
html代码部分
方法部分
开始时间和结束时间可以选同一天
<template>
<div class="range-wrapper">
<label>{{label}}</label>
<el-date-picker
v-model="value1"
type="date"
:editable=false
value-format="yyyy-MM-dd"
:picker-options="pickerOptionscreate"
placeholder="选择日期" @change="change1">
</el-date-picker>
<span>至</span>
<el-date-picker
v-model="value2"
type="date"
:editable=false
value-format="yyyy-MM-dd"
:picker-options="pickerOptionsend"
placeholder="选择日期" @change="change2">
</el-date-picker>
</div>
</template>
<script>
/**
* com-date-range
* @desc 时间范围选择器
*/
var date = []
export default {
props: {
label: {
type: String
},
},
data() {
let that = this;
return {
pickerOptionscreate: {
disabledDate(time) { //开始时间的禁用
return time.getTime() > new Date(that.value2).getTime();
}
},
//结束时间
pickerOptionsend: {
disabledDate(time) { //结束时间的禁用
return time.getTime() <new Date(that.value1).getTime()-8.64e7;
}
},
value1: '', //起始时间
value2: '', //结束时间
}
},
methods: {
change1: function() {
date[0] = this.value1
// date[0] = JSON.stringify(Date.parse(new Date(this.value1)))
this.$emit('input', date)
},
change2: function() {
date[1] = this.value2
// date[1] = JSON.stringify(Date.parse(new Date(this.value2)))
this.$emit('input', date)
},
}
}
</script>
<style scoped lang="less">
.range-wrapper {
display: inline-block;
label {
color: #606060;
}
}
.el-date-editor.el-input {
width: 150px;
}
</style>
elementui的时间选择器开始时间和结束时间的限制的更多相关文章
- bootstrap-datetimepicker 进一步跟进~~~开始时间和结束时间的样式显示
上次简单介绍了一下:05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器(http://www.cnblogs.com/dunitian/p/5524019.html) 这次深入再介绍一下 ...
- c# 获取 本周、本月、本季度、本年 的开始时间或结束时间
#region 获取 本周.本月.本季度.本年 的开始时间或结束时间 /// <summary> /// 获取结束时间 /// </summary> /// <param ...
- My97DatePicker 日期控制,开始时间不能>结束时间,结束时间不能<开始时间
<li>日期: <input type="text" style="margin-top: 5px;" value="${begin ...
- java获取本月开始时间和结束时间、上个月第一天和最后一天的时间以及当前日期往前推一周、一个月
import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.uti ...
- easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大 >>>>>>>>>>> ...
- project 2013 设置工期为1个工作日,但开始时间与结束时间不是同一天
1.问题描述 project2013在工期栏输入 1 ,在开始时间结束时间点自动安排,就会出现如下情况,会被误认为是两天 2.问题解决 文件-->选项-->常规-->日期格式选择 ...
- C# 根据第几周和季度 获取开始时间和结束时间
/// <summary> /// 根据第几周 获取开始时间和结束时间 /// </summary> /// <param name="week"&g ...
- My97DatePicker:开始时间和结束时间的最大间隔为1个月30天,并且不大于当前时间(3种方法)
问题的背景 在之前做Web项目的时候,开始时间和结束时间,只有2个要求: 1.开始时间必须小于等于结束时间,不能超过当前时间. 2.结束时间必须大于等于开始时间,不能超过当前时间. 由于开始时间不大于 ...
- myDate97 设置开始时间和结束时间
myDate97 设置开始时间和结束时间 CreationTime--2018年8月28日16点46分 Author:Marydon 1.简单示例 第一步:引入My97DatePicker/Wda ...
随机推荐
- [雅礼NOIP2018集训 day4]
感觉状态极差啊,今天居然爆零了 主要是以下原因: 1.又是T1看错题肝了两个小时,发现题意理解错误瞬间心态爆炸 2.T2交错了文件名 3.T3暴力子任务和正解(假的)混在一起,输出了两个答案 都想为自 ...
- MFC补码原码反码转换工具
/*_TCHAR str[100] = { 0 }; wsprintf(str, _T("%d"),num);*/ ; CString str; m_edit1.GetWindow ...
- FastJSON杂项
//通过TypeReference解决泛型的问题 List<Integer> rst = JSON.parseObject(v,new TypeReference<List<I ...
- spark集群体系结构
- KMP算法中求next数组的实质
在串匹配模式中,KMP算法较蛮力法是高效的算法,我觉得其中最重要的一点就是求next数组: 看了很多资料才弄明白求next数组是怎么求的,我发现我的忘性真的比记性大很多,每次看到KMP算法求next数 ...
- APP信息获取接口
https://itunes.apple.com/lookup?id=APPID&callback=2 http://myapp.com/cgi-bin/mapp/mapp_info?type ...
- Servlet基础(一)
JavaEE:企业级开发技术 <一.基础概念>j2ee:jdk1.1--1.4 ----->> j2ee1.1 1.2 javaee:jdk--5,6,7 ...
- c# 02-18 值类型 引用类型 字符串的不可变性 字符串的处理方法
1值类型 直接把值存在栈中 栈的特点是后进先出 int double decimal char struct enum bool 2 引用类型 把值存在堆中,把地址存在栈中: string 自定义的类 ...
- shell基础编程
首先要注意的是,Ubuntu里的shell的sh和bash命令是有区别的 如下所示,Ubuntu下的sh指向的dash程序,而bash是dash的增强版,一些bash上能执行的程序在dash上不行 如 ...
- 函数签名与消息转发:NSInvocation与NSMethodSignature
具体可见 https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ObjCRuntimeGuide/Article ...