vue学习之elementUI组件时间选择器做限制

对elementUI组件中的时间选择器做限制。

要求：

1. 结束时间存在时，开始时间不能大于结束时间
2. 开始时间存在时，结束时间不能小于开始时间，并且结束时间不能小于今天
3. 开始时间不存在时，结束时间不能小于今天

代码如下：

<template>
  <div class="hello">
    <p>时间选择器限制</p>
    <div>
      <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker>
      <span>-</span>
      <el-date-picker v-model="value2" type="date" placeholder="选择日期" :picker-options="pickerOptions2"></el-date-picker>
    </div>
    {{value1}}--{{value2}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      value1: '',
      value2: ''
    }
  },
  computed: {
    pickerOptions1(){
      let endTime = new Date(this.value2).getTime()
      return {
        disabledDate(time){
          if(endTime){
            return time.getTime() > endTime
          }
        }
      }
    },
    pickerOptions2(){
      let startTime = new Date(this.value1).getTime()
      let nowTime = new Date().getTime()
      return {
        disabledDate(time){
          if(startTime){
            return nowTime > startTime ? time.getTime() < nowTime : time.getTime() < startTime
          }else{
            return time.getTime() < nowTime
          }
        }
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>