element-ui form 日期选择器限制选择范围

使用场景:当我们的开始时间和结束时间被要求分开输入时,我们如何让开始时间一定在结束时间的时间前面呢?刚开始我的想法只是通过JS 判断日期的时间戳大小来决定,我就是那个例子,下面我想做的是在用户端限制用户的选择时间。

element-ui 中,提供 picker-options 对当前时间日期选择器特有的选项配置。这里主要使用 disabledDate,其返回值为 Boolean类型。

element-ui form 日期选择器限制选择范围_第1张图片

这里设定两个时间组件,分别选择开始时间和结束时间。


  
  


  
  

如何判断开始时间的日期选择器,日期选择器的范围更结束时间有关,(小于结束时间)。当结束时间不为空时,可选时间大于结束时间的,即 disabledData  返回值为 true 的日期都禁止选中。同理判断结束时间选中时间区域。

// data 中设定
pickerOptionsStart: {
  disabledDate: time => {
    let endDateVal = this.form.timeEnd;
    if (endDateVal) {
      return time.getTime() > endDateVal;
    }
  }
},
pickerOptionsEnd: {
  disabledDate: time => {
    let beginDateVal = this.form.timeBegin;
    if (beginDateVal) {
      return time.getTime() < beginDateVal;
    }
  }
}

这里只是个人的见解,更多详情,请详细阅读element-ui 官网,若有不正确的地方,希望大家多多指教。案例

你可能感兴趣的:(element-ui,date-picker)