600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > iviewui DatePicker 日期选择器 限制选取时间跨度

iviewui DatePicker 日期选择器 限制选取时间跨度

时间:2018-12-14 16:06:38

相关推荐

iviewui DatePicker 日期选择器 限制选取时间跨度

需求: 当前日期 是 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}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。