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

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

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

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

<el-form-item label="开始时间">
  <el-date-picker 
    v-model="form.timeBegin" 
    type="date" 
    value-format="timestamp"
    :picker-options="pickerOptionsStart"
    placeholder="选择日期时间"
    style="width: 100%">
  </el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
  <el-date-picker 
    v-model="form.timeEnd" 
    type="date" 
    value-format="timestamp"
    :picker-options="pickerOptionsEnd"
    placeholder="选择日期时间"
    style="width: 100%">
  </el-date-picker>
</el-form-item>

如何判断开始时间的日期选择器，日期选择器的范围更结束时间有关,（小于结束时间）。当结束时间不为空时，可选时间大于结束时间的，即 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 官网，若有不正确的地方，希望大家多多指教。案例