elementui时间选择器日期选择范围限制（el-date-picker）

1.限制结束时间必须大于开始时间

1） 在组件中添加 :picker-options="pickerOptionsEnd"

2） pickerOptionsEnd: any = {

        disabledDate: (time: any) => {

            if (this.form.startTime) {  // 开始时间

                return (

                    time.getTime() <

                    new Date(

                        this.form.startTime

                    ).getTime()

                );

            }

        }

    };

2.限制开始日期必须小于结束时间或当前日期

1） 在组件中添加 :picker-options="pickerOptionsStart"

2） pickerOptionsStart: any = {

        disabledDate: (time: any) => {

            if (this.form.endTime) {

                return (

                    time.getTime() > Date.now() - 8.64e6 ||

                    time.getTime() >

                        new Date(

                            this.form.endTime

                        ).getTime() /*开始日期要在选择的结束日期之前 若结束日期大于当前日期 则开始日期为小于当前日期*/

                );

            }

        }

    }

3 选择日期范围  - 选择一个日期后 可选范围为已选日期前后30天，且不超过当前日期

1） 在组件中添加 :picker-options="pickerOptions"

2） pickerOptions = {

    onPick: ({ maxDate,minDate}) => {

                    this.min = minDate && minDate.getTime();   //选择的小的日期  选择一个日期时的值

                    if(maxDate){   //如果两个日期都选择 该变量就有值

                        this.min=''

                    }

                },

                disabledDate:time=> {

                    let m = 30 * 24 * 60 * 60 * 1000;

                    if (this.min) {

                        return time.getTime() > (this.min+m)||time.getTime() < (this.min-m)||time.getTime() > Date.now();

                    } else {

                        return time.getTime() > Date.now();

                    }

                }