关于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 ...
随机推荐
- HTML左边盒子固定,右边盒子自适应
html: <div class="box1"> <div class="divA">DIVA</div> <div ...
- Codeforces Round #395 Div.1 C pacifist【JZOJ5449】Pacifist
题目 papyrus 喜欢谜题... 来解一道如何? 在你面前有一个被加密了的数组,其原数组是一个等差序列,你面前的则是将原数组中的所有数字都对m 取模再打乱后而得到的新数组 papyrus 给你出的 ...
- [转] SSH两种登录方式(公私钥)解析
转自:https://www.cnblogs.com/hukey/p/6248468.html SSH登录方式主要分为两种: 1. 用户名密码验证方式 说明: (1) 当客户端发起ssh请求,服务器会 ...
- POJ 3422 矩阵取数 最小费用流拆点+负边
Kaka's Matrix Travels Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9153 Accepted: ...
- [HG]小G坐电梯 题解
C 小G坐电梯 题目描述 小G来到了著名的某大厦.大厦一共有n层,初始的时候小G在第 A 层. 小G特别想去B层小 M 的办公室看一看,然而因为安保原因,B层已经被封锁无法进入. 但是小G既然来了,就 ...
- 使用svn在github上下载文件夹
今天想在github上下载mybatis-generator的eclipse插件,可是如何在github上下载一个文件夹而不用把这个项目clone呢,搜了一下,发现可以直接用svn来下载 只需将将路径 ...
- [JZOJ5398]:Adore(状压DP+记忆化搜索)
题目描述 小$w$偶然间见到了一个$DAG$. 这个$DAG$有$m$层,第一层只有一个源点,最后一层只有一个汇点,剩下的每一层都有$k$个节点. 现在小$w$每次可以取反第$i(1<i< ...
- Mysql 里CHAR和VARCHAR的最大长度及一些注意事项
先写出结论: Mysql 5中 非空CHAR的最大总长度是255[字节]:非空VARCHAR的最大总长度是65533[字节]. 可空CHAR的最大总长度是254[字节]:可空VARCHAR的最大总长度 ...
- 网页中JS函数自动执行常用三种方法
(1)最简单的调用方式,直接写到html的body标签里面: <body onload="myFunction()"></body> ...
- spring-ApplicationContext的事件传播(转)
ApplicationContext中的事件处理是通过ApplicationEvent类和ApplicationListener接口来提供的,通过ApplicationContext的publishE ...