其实不需要选择后提示,可以做到结束时间只可以在开始时间后选择,之前不可选,这样也不用考虑去做复杂的验证。
DatePicker 日期选择器:
image

设置属性 options 对象中的 disabledDate 可以设置不可选择的日期。

disabledDate 是函数,参数为当前的日期,需要返回 Boolean 是否禁用这天。

以下为页面代码:

<DatePicker
  type="date"
  v-model="value.startTime"
  :options="startOptions"
  placeholder="请选择开始时间"
  style="width: 220px"
>
</DatePicker>
<DatePicker
  type="date"
  v-model="value.endTime"
  :options="endOptions" 
  placeholder="请选择结束时间"
  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来指向,用箭头函数


Fahrenheitzz
0 声望0 粉丝

发现问题,解决问题