Element UI DatePicker 时间跨度限制在同一个月内
Element Vue 大约 2126 字需求
因后端数据是按月分区表,所以查询数据必须按不能跨月的日期查询。
代码
添加picker-options
熟悉。
<el-date-picker
:picker-options="pickerOptions"
v-model="rangeTime"
type="daterange"
value-format="timestamp"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
onPick
:当选择日期时的回调,disabledDate
:禁用日期,selectData
:记录第一次选择的时间。
data: function() {
return {
selectData: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectData = minDate.getTime()
if (maxDate) {
// 选择了最大日期后,清除已选日期,解除限制。
this.selectData = ''
}
},
disabledDate: (time) => {
// 是否禁用日期选择
if (this.selectData) {
let date = new Date(this.selectData)
// true:不可以选择该日期;false:可以选择该日期。
// 大于或者小于本月的日期被禁用
return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
} else {
return false;
}
}
}
}
}
扩展
限制只能选择当天之前的时间,如:今天2020-11-20
,则11
月只能选择2020-11-01
到2020-11-20
及之前的时间,11
月之前的时间可正常选择,2020-11-20
之后的时间禁止选择。
data: function() {
return {
selectData: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectData = minDate.getTime()
if (maxDate) {
this.selectData = ''
}
},
disabledDate: (time) => {
if (this.selectData) {
var date = new Date(this.selectData)
// 这里就是限制的关键,大于或者小于本月的日期被禁用
// 选择起始时间后,依旧需要判断禁止当天之后的时间
return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth() || time.getTime() > Date.now()
} else {
// 默认禁止当天之后的时间
return time.getTime() > Date.now();
}
}
}
}
}
阅读 5149 · 发布于 2020-11-26
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Chrome 解决 CSDN 无法复制代码问题阅读 34
-
MySQL 查询重复数据阅读 1516
-
Android ScrollView 滑动到底部阅读 3197
-
JavaFX Module reads package 'javafx.beans' from both 'javafx.base' and 'javafx.base'阅读 1872
-
Spring Boot 获取所有 SpringMVC Controller 路径阅读 752
-
Linux chattr 命令阅读 562
-
Android 使用 CountDownTimer 类进行倒计时阅读 1604
-
走进 Rust:函数阅读 1860
-
iView Tag 标签点击事件阅读 2031
-
JVM:浅堆、深堆和保留集阅读 701