iView组件日期范围添加限制

最新推荐文章于 2023-11-13 10:51:17 发布

u013131203

最新推荐文章于 2023-11-13 10:51:17 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue iview DatePicker

本文链接：https://blog.csdn.net/u013131203/article/details/84762318

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<FormItem :label="$t('myEngagement.newClient.periodFrom')">
  <DatePicker v-model="formValidate.periodFrom" type="date"
              :readonly="!isEditable" :disabled="!isEditable"
              :options="startTimeOptions" @on-change="startTimeChange"
              placeholder="dd/MM/yyyy" :style="formItemWidthShort" format="dd/MM/yyyy"></DatePicker>
  <span>{{$t('myEngagement.newClient.periodTo')}}</span>
  <DatePicker v-model="formValidate.periodTo" type="date" placeholder="dd/MM/yyyy"
              :readonly="!isEditable" :disabled="!isEditable"
              :options="endTimeOptions" @on-change="endTimeChange"
              :style="formItemWidthShort" format="dd/MM/yyyy"></DatePicker>
</FormItem>

定义在 data中

startTimeOptions: {},
endTimeOptions: {}

定义在 computed中

beginOptions () {
  return {
    disabledDate: (date) => {
      if (this.formValidate.periodTo.valueOf() !== '') {
        return date && date.valueOf() > this.formValidate.periodTo.valueOf()
      }
      return false
    }
  }
},
endOptions () {
  return {
    disabledDate: (date) => {
      if (this.formValidate.periodFrom.valueOf() !== '') {
        return date && date.valueOf() < this.formValidate.periodFrom.valueOf()
      }
      return false
    }
  }
}