element ui 日期选择(开始到结束一个月限制)

 开始时间—结束时间

<FormItem label="统计时间" prop="startDate" label-position="left" :label-width="78">
          <DatePicker
            transfer
            :editable="false"
            style="width:170px"
            type="date"
            placement="bottom-end"
            v-model="formItem.startDate"
            placeholder="请选择开始时间"
            :options="startDateOption"
            :clearable="false"
            @on-change="(startdate,type)=>onStartDateChange(startdate,type,'formItem')"
          ></DatePicker>到
        </FormItem>
        <FormItem prop="endDate">
          <DatePicker
            transfer
            :editable="false"
            style="width:170px"
            type="date"
            placement="bottom-end"
            v-model="formItem.endDate"
            placeholder="请选择结束时间"
            :clearable="false"
            :options="renderEndDateOption('formItem')"
          ></DatePicker>
        </FormItem>

开始时间选择器

 startDateOption: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },

  

开始时间的change事件

  onStartDateChange (startDate, type, formitem) {
      let dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
      if (
        this[formitem].endDate < new Date(startDate + " 00:00:00") ||
        Math.floor(
          (this[formitem].endDate.getTime() -
            new Date(startDate + " 00:00:00").getTime()) /
          dateTime
        ) > 30
      ) {
        this[formitem].endDate = "";
      }
    },

  

结束时间选择器

renderEndDateOption (formitem) {
      let dateTime = 1000 * 60 * 60 * 24;
      return {
        disabledDate: date => {
          return (
            date &&
            (date.valueOf() > Date.now() ||
              date < this[formitem].startDate ||
              Math.floor(
                (date.getTime() -
                  new Date(
                    formatDate("yyyy-MM-dd", this[formitem].startDate) +
                    " 00:00:00"
                  ).getTime()) /
                dateTime
              ) > 30)
          );
        }
      };
    },

 默认当前一周的数据

  formItem: {
        startDate: new Date(new Date().getTime() - 3600 * 1000 * 24 * 6),
        endDate: new Date(),
        provinceNo: "",
        regionNo: ""
      },

  

posted @ 2020-04-08 10:32  前端王者(法师)  阅读(3295)  评论(0编辑  收藏  举报