饿了么时间选择器el-date-picker时间范围当前日期之前可选；筛选30天范围；6个月选择范围处理；

4 一、以下是开发过程中需要对选择日期做范围限制选择，当前时间之后不能选择，最多选择30天限制，六个月限制；主要对el-date-picker时间选择范围限制，对该组件属性disabledDate进行配置（ :picker-options="pickerOptionsMonth"）

 

 二、时间筛选组件el-date-picker配置

                /** 1单个时间选择*/
                <el-date-picker v-model="dateDay"
                     
                                @change="dataChangeHandle"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                style="width: 214px"
                                :picker-options="currentOptions">
                                </el-date-picker>
    

                /** 2 日期时间范围选择*/
                          <el-date-picker v-model="dateDay"
                        
                                @change="dataChangeHandle"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                style="width: 214px"
                                :clearable="isClearable"
                                :picker-options="optionsDay">
                </el-date-picker>

                    /**   3月份时间范围选这*/    
                   <el-date-picker v-model="dateMonth"
                              
                                @change="dataChangeHandle"
                                type="monthrange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM"
                                format="yyyy-MM"
                                placeholder="选择月"
                                style="width: 214px"
                                :clearable="isClearable"
                                :picker-options="optionsMonths"> </el-date-picker>

1、只能选择当前时间之前的日期

  currentOptions: any = {
            disabledDate(time: any) {
                return time.getTime() > Date.now();
            }
        };

2 日期天数的筛选30天处理,第一次选择的时间作为时间轴 前后最多可以选择 29天；

 dateDay：  = ""  // 初始日期
       optionsDay = {
            onPick: (date: any) => {
                this.dateDay = date.minDate.getTime();
                if (date.maxDate) {
                    this.dateDay = "";
                }
            },
            disabledDate: (time: any) => {
                //time.getTime()获取的是时间戳
                // 当前时间往前30天可选
                // return (
                // time.getTime() > Date.now() ||
                // time.getTime() < Date.now() - 30 * 24 * 60 * 60 * 1000
                // )
                // 只能选择30天的范围且不能大于当前日期
                if (this.dateDay !== "" && this.type == 0) {
                    const one = 29 * 24 * 3600 * 1000;
                    const minTime = this.dateDay - one;
                    const maxTime = this.dateDay + one;
                    if (maxTime > Date.now()) {
                        return (
                            time.getTime() < minTime ||
                            time.getTime() >
                                new Date(new Date().toLocaleDateString()).getTime()
                        );
                    } else {
                        return time.getTime() < minTime || time.getTime() > maxTime;
                    }
                } else {
                    return (
                        time.getTime() >
                        new Date(new Date().toLocaleDateString()).getTime()
                    );
                }
            }
        };

vue3 + element-plus 任意当前之前30天范围内日期限制 ↓

          <ElDatePicker
            style="width: 252px !important"
            :popper-append-to-body="false"
            v-model="headerParams.nowDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            popper-class="live-popper"
            @change="handleDateChange"
            :disabled-date="disabledDate"
            @calendar-change="calendarChange"
            :clearable="true"
          />

const calendarChange = (dates: any) => {
  console.log('calendarChange ~~~~~~~~~~~~----> dates', dates)
  // 记录选择的开始日期，方便后面根据开始日期限定结束日期
  let hasSelectDate = dates !== null && dates.length > 0
  startDate.value = hasSelectDate ? dates[0] : null
}
const disabledDate = (time: Date) => {
  // 当前时间往前30天可选
  // return (
  // time.getTime() > Date.now() ||
  // time.getTime() < Date.now() - 30 * 24 * 60 * 60 * 1000
  // )
  // 只能选择30天的范围且不能大于当前日期
  if (startDate.value !== null) {
    const one = 29 * 24 * 3600 * 1000
    const minTime = new Date(startDate.value).getTime() - one
    const maxTime = new Date(startDate.value).getTime() + one
    if (maxTime > Date.now()) {
      return (
        time.getTime() < minTime ||
        time.getTime() > new Date(new Date().toLocaleDateString()).getTime()
      )
    } else {
      return time.getTime() < minTime || time.getTime() > maxTime
    }
  } else {
    return time.getTime() > new Date(new Date().toLocaleDateString()).getTime()
  }
  // return time.getTime() > Date.now() || time.getTime() < Date.now() - 6 * 30 * 24 * 60 * 60 * 1000
}

3、 月期筛选6个月范围限制，注意点是前面月份要加一天，时间月赛选是 0-11月；

第一次选择的时间作为时间轴 前后最多可以选择5个月；

dateMonth: any = '';  // 初始化月期
 /** 单独处理范围最大六个月&当前时间为本月1号不可选 */
        optionsMonths: any = {
            // 当前选择日期未结束时dateMonth为时间戳
            onPick: (date: any) => {
                this.dateMonth = date.minDate && date.minDate.getTime();
                if (date && date.maxDate) {
                    this.dateMonth = "";
                }
            },
            disabledDate: (time: any) => {
                // 如果当前时间为每月的一号当前月份不可选
                const newDay = new Date().getDate();
                if (Number(newDay) == 1) {
                    return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000;
                }
                // 月范围
                if (this.dateMonth !== "" && this.type == 0) {
                    const one = 5 * 30 * 24 * 3600 * 1000;
                    const two = 6 * 30 * 24 * 3600 * 1000; // 月份前取加1
                    const minTime = this.dateMonth - one;
                    const maxTime = this.dateMonth + two;
                    if (maxTime > Date.now()) {
                        return (
                            time.getTime() < minTime ||
                            time.getTime() >
                                new Date(new Date().toLocaleDateString()).getTime()
                        );
                    } else {
                        return time.getTime() < minTime || time.getTime() > maxTime;
                    }
                } else {
                    return (
                        time.getTime() >
                        new Date(new Date().toLocaleDateString()).getTime()
                    );
                }
            }
        };

 4、通过变化事件对选择日期范围做限制提示

// 日期变化时间选择提示处理

        dataChange() {

            const data = {

                date: "",

            };

             data.date = this.dateMonth;


            if (this.isSection && data.date[0] >= data.date[1]) {

                this.init(); // 初始化数据

                this.$message("开始时间必须小于结束时间");

                return;

            }

            // 六个月范围

            if (this.isSection && this.type == 1) {

                const minMonth = data.date[0] && data.date[0].split("-")[1];

                const maxMonth = data.date[1] && data.date[1].split("-")[1];

                if (Number(maxMonth) - Number(minMonth) > 6) {

                    this.initData();

                    this.$message("自然月可选择一段时间范围最大6个月");

                    return;

                }

            }

            this.$emit("dateTransmitSelect", data);  // 传给父组件处理同步时间

        }