iView組件日期範圍添加限制

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