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. hadoop namenode切换

    hdfs haadmin -transitionToActive --forcemanual nn1 将nn1强制转换为Active hdfs haadmin -transitionToStandby ...

  2. Python2和Python3中列表推导式的不同

    Python2和Python3中列表推导式的不同 python2 >>> x = 'my girl' >>> lst = [x for x in 'hello'] ...

  3. 【BZOJ 3682】Phorni

    题目链接 题目描述 Phorni 是一个音之妖精,喜欢在你的打字机上跳舞. 一天,阳光映射到刚刚淋浴过小雨的城市上时,Phorni 用魔法分裂出了许多个幻影,从 1 到 n 编号. 她的每一个幻影都站 ...

  4. LightOJ-1027-A Dangerous Maze(概率)

    链接: https://vjudge.net/problem/LightOJ-1027#author=634579757 题意: You are in a maze; seeing n doors i ...

  5. C++--- Lambda匿名函数表达式

    视频教程:https://www.bilibili.com/video/av66419552/ 格式: [capture](parameters)mutable->returm-type{};  ...

  6. MySql触发器简介

    MySQL 数据库中触发器是一个特殊的存储过程,不同的是执行存储过程要使用 CALL 语句来调用,而触发器的执行不需要使用 CALL 语句来调用,也不需要手工启动,只要一个预定义的事件发生就会被 My ...

  7. 关于enter事件的触发

    如果您使用了antd的Button组件,那么恭喜已经封装好了,只要加上htmlType='submit', 如果没有使用其他框架,使用onPress或者onKeydown事件,判断e.keycode ...

  8. jquery password选择器 语法

    jquery password选择器 语法 作用::password 选择器选取类型为 password 的 <input> 元素.大理石平台精度等级 语法:$(":passwo ...

  9. 51 Nod 大鱼吃小鱼

    1289 大鱼吃小鱼  题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游 ...

  10. TTTTTTTTTTTTTT poj 1127 Jack Straws 线段相交+并查集

    题意: 有n个木棍,给出木棍的两个端点的x,y坐标,判断其中某两个线段是否连通(可通过其他线段连通) #include <iostream> #include <cstdio> ...