需求: 当前日期 是 4月27日,要求当天后的日期不可选,选中的日期跨度是4天,比如我选13号,13号前四天后四天是可选的,其余都不可选。
vue + ivewUI
<DatePickerref="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.rangeStateif (rangeState && rangeState.selecting) {const middle = this.$Date(rangeState.from)this.rangeStart = middle.add(-4, 'day')this.rangeEnd = middle.add(4, 'day')} else {this.rangeStart = nullthis.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}}