关于前端:iview2个datepicker结束时间在开始时间之后

8次阅读

共计 782 个字符，预计需要花费 2 分钟才能阅读完成。

其实不须要抉择后提醒，能够做到完结工夫只能够在开始工夫后抉择，这样也不必思考去做简单的验证。
DatePicker 日期选择器：

设置属性 options 对象中的 disabledDate 能够设置不可抉择的日期。

disabledDate 是函数，参数为以后的日期，须要返回 Boolean 是否禁用这天。

以下为页面代码：

<DatePicker
  type="date"
  v-model="value.startTime"
  :options="startOptions"
  :placeholder="$t('p_select')+$t('effective_start_time')"
  style="width: 220px"
>
</DatePicker>
<DatePicker
  type="date"
  v-model="value.endTime"
  :options="endOptions" 
  :placeholder="$t('p_select')+$t('effective_end_time')"
  style="width: 220px"
>
</DatePicker>

上面为 data(){} 外面代码

startOptions: {disabledDate:(date) => {let data = this.value.endTime == '' ? Date.now() : this.value.endTime;
      return date >= data;
    }
},
endOptions: {
    // 指定终止日期
    disabledDate: (date) => {
      let data = this.value.startTime == ''?'' : this.value.startTime;
      return date < data;
    }
},

这里官网文档为 disabledDate(date){}, 咱们为了能够用 this.value.startTimethis 来指向，用箭头函数

正文完