Element UI DatePicker 时间跨度限制在同一个月内
Element Vue About 2,126 words需求
因后端数据是按月分区表,所以查询数据必须按不能跨月的日期查询。
代码
添加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();
}
}
}
}
}
Views: 6,847 · Posted: 2020-11-26
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...