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

该博客介绍了如何在Vue和iviewUI中限制DatePicker组件的日期选择,确保当前日期之后的日期不可选,并且选择的日期跨度为4天。通过监听on-pick事件和hack方式实现动态控制日期状态,禁止超出范围的日期选择。
最低0.47元/天 解锁文章
2302





