Vue element UI 日期组件限制可选范围(实用)

1、限制只能可选范围为一个月:

html:

:picker-options="pickerOptions"
 value-format="yyyy-MM-dd HH:mm:ss"

js:

pickerOptions: {
 disabledDate(time) {
    const one = 30 * 24 * 3600 * 1000;
    return time.getTime() > Date.now() + one || time.getTime() < Date.now();
    // return time.getTime() < Date.now();
  }
},

2、结束时间不能小于开始时间

js:

pickerOptions: {
  disabledDate: time => {
    let beginDateVal = this.search.kssj; // 双向绑定的开始时间
    if (beginDateVal) {
     return time.getTime() < new Date(beginDateVal).getTime() - 8.64e7;// 8.64e7 为24小时
    }
   }
 },

效果如下:
Vue element UI 日期组件限制可选范围(实用)_第1张图片

你可能感兴趣的:(Vue element UI 日期组件限制可选范围(实用))