关于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 ...
随机推荐
- hadoop namenode切换
hdfs haadmin -transitionToActive --forcemanual nn1 将nn1强制转换为Active hdfs haadmin -transitionToStandby ...
- Python2和Python3中列表推导式的不同
Python2和Python3中列表推导式的不同 python2 >>> x = 'my girl' >>> lst = [x for x in 'hello'] ...
- 【BZOJ 3682】Phorni
题目链接 题目描述 Phorni 是一个音之妖精,喜欢在你的打字机上跳舞. 一天,阳光映射到刚刚淋浴过小雨的城市上时,Phorni 用魔法分裂出了许多个幻影,从 1 到 n 编号. 她的每一个幻影都站 ...
- LightOJ-1027-A Dangerous Maze(概率)
链接: https://vjudge.net/problem/LightOJ-1027#author=634579757 题意: You are in a maze; seeing n doors i ...
- C++--- Lambda匿名函数表达式
视频教程:https://www.bilibili.com/video/av66419552/ 格式: [capture](parameters)mutable->returm-type{}; ...
- MySql触发器简介
MySQL 数据库中触发器是一个特殊的存储过程,不同的是执行存储过程要使用 CALL 语句来调用,而触发器的执行不需要使用 CALL 语句来调用,也不需要手工启动,只要一个预定义的事件发生就会被 My ...
- 关于enter事件的触发
如果您使用了antd的Button组件,那么恭喜已经封装好了,只要加上htmlType='submit', 如果没有使用其他框架,使用onPress或者onKeydown事件,判断e.keycode ...
- jquery password选择器 语法
jquery password选择器 语法 作用::password 选择器选取类型为 password 的 <input> 元素.大理石平台精度等级 语法:$(":passwo ...
- 51 Nod 大鱼吃小鱼
1289 大鱼吃小鱼 题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游 ...
- TTTTTTTTTTTTTT poj 1127 Jack Straws 线段相交+并查集
题意: 有n个木棍,给出木棍的两个端点的x,y坐标,判断其中某两个线段是否连通(可通过其他线段连通) #include <iostream> #include <cstdio> ...