二次封装日期选择器（含时间限制）

可传入参数：

选择器类型、选择器输入框尺寸、限制可选最长时间、限制可选择时间段、选择器输入框默认值

 <el-date-picker
        v-model="searchDateText"
        :size="selectSize"
        :type="dataType"
        :clearable="false"
        :range-separator="rangeSeparator"
        :start-placeholder="startPlaceholder"
        :end-placeholder="endPlaceholder"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="datePickerOptions"
        @change="onDatePickerChange">
</el-date-picker>

import moment from 'moment';

  export default {
    props:{
        dateValue:{ 
            type: Array
        },
        dataType:{  //传入日期选择器类型
            type:String
        },
        limitDate:{  //限制时间段，传值为Number
            type:Number,
            default:null,
        }, 
        maxDate:{   //限制可选最长时间，传值为Number
            type:Number,
            default:null,
        },
        selectSize:{  //选择器输入框尺寸，不传值默认为mini
            type:String,
            default:'mini'
        } ,
        //选择器默认显示，不传显示默认值
        startPlaceholder:{ 
           type:String,
           default:'开始日期' 
        },
        endPlaceholder:{
           type:String,
           default:'结束日期' 
        },
        rangeSeparator:{
           type:String,
           default:'至' 
        }
    },
    data() {
      return {
        searchDateText: this.dateValue,
        selectDate: '',
        defaultSearchDate: [],

        datePickerOptions:{
        // 最近一个月可选
            disabledDate: (time) => {
                let nowDate = new Date();  //获取当前时间
                let oneDay = 1000 * 60 * 60 * 24;  //一天的毫秒数
                nowDate.setHours(23, 59, 59, 0);//获取今天的结束，开始为setHours(0, 0, 0, 0)
                let maxDateAgo = new Date(nowDate.getTime() - oneDay * this.maxDate); //获取限制时间
                maxDateAgo.setHours(0, 0, 0, 0);//获取开始限制时间
                if (this.selectDate) { //判断是否选择时间，若已选择时间，则做时间段限制
                    const tempData = this.selectDate;
                    //判断是否传入相应时间限制
                    if(this.limitDate==null) return time.getTime() > nowDate || time.getTime() < maxDateAgo
                    else if(this.maxDate==null) {
                        return moment(this.selectDate).add(this.limitDate-1, "d").isBefore(time) 
                               ||moment(tempData.setHours(23, 59, 59, 0)).subtract(this.limitDate, "d").isAfter(time);
                    }
                    else {
                        return time.getTime() > nowDate || time.getTime() < maxDateAgo ||
                                moment(this.selectDate).add(this.limitDate-1, "d").isBefore(time) 
                               ||moment(tempData.setHours(23, 59, 59, 0)).subtract(this.limitDate, "d").isAfter(time);
                    }
                }
                if(this.maxDate==null && this.limitDate==null) return false
                if(this.maxDate==null) return false
                return time.getTime() > nowDate || time.getTime() < maxDateAgo  //设置禁选日期
            },
            //选中日期后执行回调
            onPick: ({ minDate }) => {
                if(this.maxDate==null && this.limitDate==null){}
                else this.selectDate = minDate;
            }
        },
      };
    },
    created(){
        this.initNowDate()
    },
    methods:{
        //初始化
        initNowDate() {
            let startDate = new Date().setHours(0, 0, 0, 0);
            let endDate = new Date().setHours(23, 59, 59, 0);
            this.searchDate = [startDate, endDate];
            this.defaultSearchDate = [startDate, endDate];
        },
        //清空已选时间
        onDatePickerChange() {
 			this.selectDate = "";
		},
    }

  };

引入组件：

<DateSelectSelf dataType="daterange" v-model="searchDateText" maxDate=365 limitDate=7 ></DateSelectSelf>  

import DateSelectSelf from './DateSelectSelf.vue'

export default {
  components: {
    DateSelectSelf
  }
}