何开此题
何开此题何开此题我是一个码农，缘起就是这次需求遇到了之前实现过的功能细节，不想再从头翻组件文档实现一遍，最好是直接拷贝粘贴。细节
细节细节picker-options 设定规则：时间范围最大可选择30天, 最晚时间为今天。
element-ui 的日期选择器的组件是 el-date-picker.设定 pickerOptions2，
data() {

return {

pickerOptions2: {

disabledDate: theDate => {

const oneDay = 3600 * 1000 * 24


const current = theDate.getTime()

const now = Date.now()


const condition1 = current > now

if (!this.minDateTimestamp) return condition1


const pickerRangeNum = 30


// 时间范围最大可选择30天,最晚时间为今天

const lastMonthBegin = this.minDateTimestamp

const lastMonthEnd = lastMonthBegin + pickerRangeNum * oneDay


return (

condition1 || current < lastMonthBegin || current > lastMonthEnd

)

},

onPick: ({ maxDate, minDate }) => {

this.minDateTimestamp = minDate.getTime()

if (maxDate) {

this.minDateTimestamp = 0

}

},

},

}
},


data() {

return {

pickerOptions2: {

disabledDate: theDate => {

const oneDay = 3600 * 1000 * 24


const current = theDate.getTime()

const now = Date.now()


const condition1 = current > now

if (!this.minDateTimestamp) return condition1


const pickerRangeNum = 30


// 时间范围最大可选择30天,最晚时间为今天

const lastMonthBegin = this.minDateTimestamp

const lastMonthEnd = lastMonthBegin + pickerRangeNum * oneDay


return (

condition1 || current < lastMonthBegin || current > lastMonthEnd

)

},

onPick: ({ maxDate, minDate }) => {

this.minDateTimestamp = minDate.getTime()

if (maxDate) {

this.minDateTimestamp = 0

}

},

},

}
},

模板的设定，



总结
总结
总结
element-ui 动态限定的日期范围选择器，再回首，不用愁。