Vue element DateTimePicker 限制时间
作者:
逸笛 | 来源:发表于
2021-05-18 10:05 被阅读0次

图片.png
<div class="timeSelect">
<el-date-picker
v-model="timeVal"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</div>
data(){
return {
timeVal: '',
pickerOptions: {
// 点击时,选择的是开始时间,也就是minDate
onPick: ({ maxDate, minDate }) => {
this.timeVal= minDate.getTime()
if (maxDate) {
// 解除限制
this.timeVal= ''
}
},
disabledDate: (time) => {
// 是否限制的判断条件
if (!this.isNull(this.timeVal)) {
const val = 30 * 24 * 3600 * 1000
const minTime = this.timeVal - val
const maxTime = this.timeVal + val
// 这里就是限制的关键
return time.getTime() < minTime || time.getTime() > maxTime
} else {
return false
}
}}
},
methods:{
// 检查是否为空
isNull(value) {
if (value) {
return false
}
return true
}
}
本文标题:Vue element DateTimePicker 限制时间
本文链接:https://www.haomeiwen.com/subject/ensejltx.html
网友评论