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中日期选择器时间选择范围限制的更多相关文章

  1. 【ElementUI】日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...

  2. ElementUI datepicker日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 最近做项目用到了datepicker,需要对日期选择做一些限制, ...

  3. ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期

    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...

  4. element-ui DatePicker 日期选择器 让结束日期大于开始日期

    element-ui  DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...

  5. ElementUI日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这 ...

  6. iview和element中日期选择器快捷选项的定制控件

      公司的两个vue项目中都用到了iview和element这个框架,最近的两个需求都有关于日期选择的定制控件,就是要求日期选择的快捷选项左边栏有包含今日.昨日.本周.上周.最近一周.本月.上月.上季 ...

  7. ElementUI DatePicker 日期选择器控制选择时间范围

    选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...

  8. element-ui 时间日期选择器格式化后台需要的格式

    <el-date-picker v-model="startTime" type="datetime" format="yyyy-MM-dd H ...

  9. element-ui 中日期控件限制时间跨度

    支持点击今天及之前任意日期,前后跨度不超过31天,且不超过今天 <el-date-picker v-model="searchForm.dateRange" type=&qu ...

随机推荐

  1. JZOJ5358【NOIP2017提高A组模拟9.12】BBQ

    题目 分析 发现,\(C_{ai+aj+bi+bj}^{ai+aj}\),其实就等于从(0,0)走最短路到(ai+aj,bi+bj). 我们可以想办法将i.j分开,从(0,0)走最短路到(ai+aj, ...

  2. 处理离散型特征和连续型特征共存的情况 归一化 论述了对离散特征进行one-hot编码的意义

    转发:https://blog.csdn.net/lujiandong1/article/details/49448051 处理离散型特征和连续型特征并存的情况,如何做归一化.参考博客进行了总结:ht ...

  3. Python CGI编程Ⅷ

    通过CGI程序传递checkbox数据 checkbox用于提交一个或者多个选项数据,HTML代码如下: 以下为 checkbox.py 文件的代码: 修改 checkbox.py 权限: 通过CGI ...

  4. jquery click()方法 语法

    jquery click()方法 语法 作用:当点击元素时,会发生 click 事件.当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click.click() 方法触发 click ...

  5. 大视频上传T级别解决方案

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  6. (Java多线程系列五)守护线程

    守护线程 什么是守护线程 Java中有两种线程,一种是用户线程,一种是守护线程. 当进程不存在或主线程停止,守护线程也会自动停止. class DaemonThread extends Thread ...

  7. Linux iptables 防火墙设置

    1.查看防火墙iptables -L -niptablesb -L -n --line-number  显示规则行号看到 INPUT ACCEPT, FORWARD ACCEPT , OUTPUT A ...

  8. 我不熟悉的map

    讲map之前,其实很多都在set那篇讲过了.我不熟悉的set. 很多的API都类似,不会再累述. map和set都是用红黑树实现的,但是set只能存单个值,它的key和value都是同一个,map不一 ...

  9. idea中JSP页面不能访问静态资源(图片,js,css)

    必须配置SpringMvc对访问静态资源的支持,idea默认就是在main/webapp 下的文件路径,要在web-info同级的resource文件下放置,JSP中 ${pageContext.re ...

  10. spring注解版

    第一.spring框架快速入门 1.1什么是spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (Inversion of C ...