iview時間組件DatePicker，設置開始時間和結束時間約束

<Col span="7">
    <FormItem label="DatePicker">
         <Row>
               <Col span="11">
                    <DatePicker type="date" placeholder="Select date" v-model="formValidation.startTime" :option="startTimeOption" @on-change="startTimeChange"></DatePicker>
                  </Col>
                  <Col span="2" style="text-align: center">-</Col>
                  <Col span="11">
                        <DatePicker type="date" placeholder="Select date" v-model="formValidation.endTime" :option="endTimeOption" @on-change="endTimeChange"></DatePicker>
                   </Col>
              </Row>
    </FormItem>
</Col>

<script>
export default{
    data(){
        return{
             areaList:[
                  {
                       value:1,
                       label:'監獄1'
                  },
                  {
                       value:2,
                       label:'監獄2'
                  }
             ],
              formValidate:{
                  area:'',
                  name:'',
                  startTime:'',
                  endTime:''
             }
        }
    },
    computed:{
         //設置不可選擇的日期,option的disabledDate屬性
         startTimeOption(){
               return{
                     //date為從1970開始的日期
                     disabledDate:date=>{
                           let endTime  = new Date(this.formValidate.endTime).valueOf();
                            //若返回值為ture 則該日期處於禁用狀態
                            return date && date.valueOf() >endTime;
                     }
               }
          },
         endTimeOption(){
               return{
                     disabledDate:date=>{
                           //為了讓結束日期可以選擇當前開始日期，則減去一天的時間
                           let startTime  = new Date(this.formValidate.startTime).valueOf() -1*24*60*60*1000;
                            return date && date.valueOf() <startTime  ;
                     }
               }
          },     
    },
    methods:{
         //e為已經格式化的當前選中的日期
         startTimeChange(e){
                 this.formValidate.startTime =e;
         },
         endTimeChange(e){
                 this.formValidate.endTime =e;
         },

    }
}
</script>