iview 中日期选择器限制选择区间的方法

iview 中日期选择器限制选择区间的方法

<template>
	<div>
        <Date-picker v-model="startTime" 
                     :options="startTimeOption" 
                     @on-change="onStartTimeChange"
                     type="date" 
                     placeholder="选择开始日期">
         </Date-picker>
        <Date-picker  v-model="endTime"  
                     :options="endTimeOption"   
                     @on-change="onEndTimeChange" 
                     type="date"
                     placeholder="选择结束日期" >
        </Date-picker>
    </div>
</template>
<script>
    import moment from 'moment'
    mounted(){
        this.startTime = moment().subtract(3, "days").format("YYYY-MM-DD");
        this.endTime = moment().format("YYYY-MM-DD");
        let vm = this;
        this.startTimeOption = {
            disabledDate(startTime) {
                 return (
                     startTime > new Date(vm.endTime) || startTime > Date.now()
                 );
             }
        };
        this.endTimeOption = {
            disabledDate(endTime) {
                return (
                    endTime < new Date(vm.startTime)
                );
            }
        };
    },
    data(){
        return{
            startTime :"",
            endTime:"",
            startTimeOption: {},
            endTimeOption:{}
        }
    },
	methods:{
        onStartTimeChange(startTime, type) {
            this.endTimeOption = {
                disabledDate(endTime) {
                    return (
                        endTime < new Date(startTime)
                    );
                }
            };
        },
        onEndTimeChange(endTime, type) {
                this.startTimeOption = {
                    disabledDate(startTime) {
                        return (
                            startTime > new Date(endTime) || startTime > Date.now()
                        );
                    }
                };
            },
        }
</script>