H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

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

问题描述

页面内容

一个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>

js

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)
})
}
}

回答

我是把options写到computed里面,你可以试试
【Vue】iview框架中datepicker根据接口数据修改禁用日期

仔细看看iview官网

本文地址:H5W3 » 【Vue】iview框架中datepicker根据接口数据修改禁用日期

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址