?需求: 当前日期 是 2022年4月27日,要求当天后的日期不可选,选中的日期跨度是4天,比如我选13号,13号前四天后四天是可选的,其余都不可选。
vue + ivewUI
<DatePicker
ref="datePicker"
type="daterange"
@on-pick="onPick"
class="ivu-ml-16"
placeholder="选择日期"
style="width: 200px"
:options="options3"
v-model="DatePicker"
></DatePicker>
mounted() {
// iView DatePicker没有提供动态控制日期状态办法,这里采用hack方式实现
this.$refs.datePicker.$refs.pickerPanel.$on('on-pick-click', this.onPick)
},
methods: {
// 设置日期跨度
onPick() {
const rangeState = this.$refs.datePicker.$refs.pickerPanel.rangeState
if (rangeState && rangeState.selecting) {
const middle = this.$Date(rangeState.from)
this.rangeStart = middle.add(-4, 'day')
this.rangeEnd = middle.add(4, 'day')
} else {
this.rangeStart = null
this.rangeEnd = null
}
},
isEnableDate(date) {
if (this.$Date(date).isAfter(new Date())) {
return false
}
if (this.rangeStart) {
return !(this.$Date(date).isBefore(this.rangeStart) || this.$Date(date).isAfter(this.rangeEnd))
}
return true
}
}
|