【Vue】iview框架中datepicker根据接口数据修改禁用日期

Z时代
2024-01-10
分类：技术分享

问题描述

页面内容

一个input框输入编号，一个datepicker框选择时间
根据input框中的编号调用后台接口，接口返回一个日期，如果返回日期为1970-01-01，则今天之前的日期被禁用，否则返回日期前的时间被禁用。

尝试方法

在input框on-blur时调用接口，获取到日期，设置datepicker禁用

存在问题

第一次输入编号时，datepicker禁用设置正常
若直接删除原来编号，再次触发on-blur时，接口获取日期正常但datepicker禁用依然是上一次的结果。

不知道是不是iview存在options的值只能设置一次的bug？

相关代码

html(省略一些无用的class placeholder等)

<Input v-model="searchForm.no" @on-blur="changeDisabled"></Input><DatePicker v-model="searchForm.date" type="date" :options="dateCanChoose"></DatePicker>

changeDisabled() {
if (this.searchForm.blNo != "") {
// 先把原来的日期清空
this.isDatePickDisabled = true
let params = {
refNum: this.searchForm.blNo
}
this.$axios.post(后台接口, params,
(code,result) => {
if (code == 200) {
let extendTo = result.data.date
if (extendTo == '1970-01-01') {
// 今天之后的日期可选
this.dateCanChoose = {
disabledDate: function (date)
return date && date.valueOf() < Date.now() - 86400000
}
}
} else {
// 此天之后的日期可选
this.dateCanChoose = {
disabledDate: function (date) {
let extendDate = new Date(extendTo).getTime()
return date && date.valueOf() < extendDate
}
}
}
}
}, (err) => {
console.log(err)
})
}}