今天在工作时，后端提出了一个DatePicker日期范围组件的一个问题 用图描述大概就是选择开始日期 13 号后，只能选择 13 号前一周和后一周的日期，其他日期处于禁止选择状态。
先去看了下 element 的相关文档，找到了一个当前时间日期选择器特有的选项picker-options，传送门文章来源：https://www.toymoban.com/news/detail-527892.html
根据这个回调函数可以拿到点击的开始时间是，然后根据点击的开始时间在picker-options中disabledDate中处理需禁用的日期，由于这个日期是动态不确定的，所以将picker-options放在computed里面去处理，大致下面这个样子，可以获取到data中的数据文章来源地址https://www.toymoban.com/news/detail-527892.html
computed: {
pickerOptions() {
let _this = this
return {
disabledDate(time) {
const times = 86400000 * 7 //一周的毫秒数
let curSelectTime = new Date(_this.minDate).getTime()
let before = curSelectTime - times //前一周三年毫秒数
return time.getTime() > after || time.getTime() < before
},
onPick({ maxDate, minDate }) {
console.log('minDate', minDate)
console.log('maxDate', maxDate)
if (!maxDate) {
console.log(123)
_this.minDate = minDate
}
}
}
}
},到了这里，关于Element UI DatePicker 日期范围选择动态设置禁选日期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
