关于ElementUI中日期选择器时间选择范围限制
1、组件代码
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0">
</el-date-picker>
2、设置选择今天以及今天之后的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
3、设置选择今天以及今天以前的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
}
}
4、设置选择今天之后的日期(不能选择当天时间)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
}
}
5、 设置选择今天之前的日期(不能选择当天)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}
6、设置选择三个月之前到今天的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = * * * ;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
}
}
7、两个输入框
<el-date-picker
v-model="value1"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
v-model="value2"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions1">
</el-date-picker>
限制结束日期不能大于开始日期
data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
} }
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
},
}
}
关于ElementUI中日期选择器时间选择范围限制的更多相关文章
- 【ElementUI】日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...
- ElementUI datepicker日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 最近做项目用到了datepicker,需要对日期选择做一些限制, ...
- ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期
<el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...
- element-ui DatePicker 日期选择器 让结束日期大于开始日期
element-ui DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...
- ElementUI日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这 ...
- iview和element中日期选择器快捷选项的定制控件
公司的两个vue项目中都用到了iview和element这个框架,最近的两个需求都有关于日期选择的定制控件,就是要求日期选择的快捷选项左边栏有包含今日.昨日.本周.上周.最近一周.本月.上月.上季 ...
- ElementUI DatePicker 日期选择器控制选择时间范围
选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...
- element-ui 时间日期选择器格式化后台需要的格式
<el-date-picker v-model="startTime" type="datetime" format="yyyy-MM-dd H ...
- element-ui 中日期控件限制时间跨度
支持点击今天及之前任意日期,前后跨度不超过31天,且不超过今天 <el-date-picker v-model="searchForm.dateRange" type=&qu ...
随机推荐
- php上传文件代码解析
思想:把html的input标签组织成一个数组,然后去重 关键技术涉及的函数 is_dir mkdir move_uploaded_file() 涉及的数组 预定义数组$_FILES 步骤一:检查上传 ...
- HGOI20190811 省常中互测4
Problem A magic 给出一个字符串$S$,和数字$n$,要求构造长度为$n$只含有小写字母的字符串$T$, 使得在$T$中存在删除且仅删除一个子串使得$S=T$成立. 输出$T$的构造方案 ...
- Remove the Substring
D2. Remove the Substring (hard version) 思路:其实就是贪心吧,先从前往后找,找到 t 可在 s 中存在的最小位置 (pre),再从后往前找,找到 t 可在 s ...
- 大哥带的JavaScript伪协议
将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的 ...
- JAVA源文件中可以包含多个类
可以的,一个“.java”源文件里面可以包含多个类,但是只允许有一个public类,并且类名必须和文件名一直:例如: package test; public class test { } class ...
- 分布式-信息方式-ActiveMQ静态网络连接多线程的consumer(消费者)访问集群
操作如下: 1:把整个conf文件夹复制一份,比如叫做conf22:修改里面的 activemq.xml文件(1)里面的 brokerName不能跟原来的重复(2)数据存放的文件名称不能重复,比如:& ...
- 分布式-信息方式-ActiveMQ的消息存储持久化
ActiveMQ的消息存储持久化■概述ActiveMQ不仅支持 persistent和 non-persistent两种方式,还支持消息的恢复( recovery)方式PTPQueue的存储是很简单的 ...
- pom.xml报Plugin execution not covered by lifecycle configuration错误
环境 eclipse 4.3.0 maven 3.0.4 m2e 1.4.0 出现场景 以前的老项目,在我的环境(我的环境较新)下,别人老环境不报错. 错误示 ...
- spark streaming 3: Receiver 到 submitJobSet
对于spark streaming来说,receiver是数据的源头.spark streaming的框架上,将receiver替换spark-core的以磁盘为数据源的做法,但是数据源(如监听某个 ...
- PHP 设置Cookie值注意项
Cookie 中的value值只能添加设置为String类型的字符串数据,但我们需要添加如数组,json串等其他类型的数据时,我们就要先对数据进行转换,再存入Cookie里了. Cookie 存储数组 ...