ElementUI的两个分开的时间选择器进行开始和结束时间限制

月伤59

已于 2023-07-20 18:10:23 修改

阅读量917

点赞数 1

文章标签： elementui vue.js 前端

于 2023-07-20 18:09:30 首次发布

本文链接：https://blog.csdn.net/qq_59625204/article/details/131836708

版权

data里面要定义的数据：

开始日期的时间选择器定义事件：

:picker-options="pickerOptionStart" @change="changeYearstart"

<el-date-picker
    clearable
    v-model="statisticsQueryParams.startTime"
    type="date"
    value-format="yyyy-MM-dd"
    placeholder="请选择开始日期"
    :picker-options="pickerOptionStart"
    @change="changeYearstart"
>
</el-date-picker>

changeYearstart() {
      let _this = this;
        //防止清空数据时导致不能选的bug
      if (this.statisticsQueryParams.startTime == null) {
        this.pickerOptionEnd = {
          disabledDate(time) {},
        };
        return;
      }
      if (this.statisticsQueryParams.startTime == null) return;
      this.pickerOptionEnd = {
        disabledDate(time) {
          let date = new Date(_this.statisticsQueryParams.startTime);
          date.setDate(date.getDate() - 1);
          return time.getTime() < date.getTime();
        },
      };
    },

结束时间：

:picker-options="pickerOptionEnd" @change="changeYearEnd"

<el-date-picker
   clearable
   v-model="statisticsQueryParams.endTime"
   type="date"
   value-format="yyyy-MM-dd"
   placeholder="请选择结束日期"
   :picker-options="pickerOptionEnd"
   @change="changeYearEnd"
>
</el-date-picker>

changeYearEnd() {
      let _this = this;
      if (this.statisticsQueryParams.endTime == null) {
        this.pickerOptionStart = {
          disabledDate(time) {},
        };
        return;
      }

      this.pickerOptionStart = {
        disabledDate(time) {
          return (
            time.getTime() >
            new Date(_this.statisticsQueryParams.endTime).getTime()
          );
        },
      };
    },