如果在选择日期后,需要更新picker-options的disabledDate函数,可以通过监听v-model的变化,在变化后更新picker-options中的disabledDate函数。具体实现如下:

  1. 在data中定义一个变量,用于监听v-model的变化:
data() {
  return {
    form: {
      startAccountingTime: '', // 起始日期
      endAccountingTime: '' // 结束日期
    },
    pickerOptions: {
      disabledDate: time => {
        return time.getTime() > new Date(this.form.endAccountingTime).getTime();
      }
    }
  }
}
  1. 在watch中监听v-model的变化,更新picker-options:
watch: {
  'form.startAccountingTime': function(newVal) {
    this.pickerOptions.disabledDate = time => {
      return time.getTime() > new Date(this.form.endAccountingTime).getTime();
    }
  },
  'form.endAccountingTime': function(newVal) {
    this.pickerOptions.disabledDate = time => {
      return time.getTime() < new Date(this.form.startAccountingTime).getTime();
    }
  }
}
  1. 在el-date-picker中,将picker-options绑定到:picker-options属性上:
<el-date-picker
  ref="startPicker"
  clearable
  size="mini"
  v-model="form.startAccountingTime"
  type="date"
  value-format="yyyy-MM-dd"
  placeholder="选择起始日期"
  style="width: 130px"
  :picker-options="pickerOptions"
></el-date-picker>
<el-date-picker
  ref="endPicker"
  clearable
  size="mini"
  v-model="form.endAccountingTime"
  type="date"
  value-format="yyyy-MM-dd"
  placeholder="选择结束日期"
  style="width: 130px"
  :picker-options="pickerOptions"
></el-date-picker>

这样,在选择日期后,picker-options中的disabledDate函数就会更新,实现了根据选择的日期来禁用/启用相应的日期

el-form-item label=会计期间: required rules=rulesstartAccountingTime el-col span=8 el-form-item el-date-picker ref=startPicker clearabl

原文地址: https://www.cveoy.top/t/topic/iR4Q 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录