使用Element+vue实现开始与结束时间限制

使用Element UI和Vue.js实现开始时间和结束时间限制的过程如下：

步骤一：安装Element UI库

在项目目录的命令行中运行以下命令来安装Element UI库：

npm install element-ui -S

步骤二：引入Element UI组件

在Vue.js项目的main.js中引入Element UI组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

步骤三：创建日期选择器

使用Element UI的日期选择器组件，设置开始时间限制和结束时间限制的属性：

<el-date-picker
  v-model="date"
  type="date"
  :picker-options="pickerOptions"
></el-date-picker>

export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7;
        }
      }
    };
  }
}

在代码中，我们用“pickerOptions”对象中的“disabledDate”函数来限制时间范围。在该函数中，我们返回一个布尔值，用于判断该日期是否可用。在本例中，我们使用“Date.now()”获得当前时间，然后减去“8.64e7”（即一天的毫秒数），这样就得到了八天前的时间戳，超过这个时间戳的日期将被限制。如果你的开始日期控件和结束日期控件都要进行限制，可以设置endDatePickerOptions，根据需要设置minDate或maxDate属性。

示例一：限制全部日期选择器

<el-date-picker
  v-model="start"
  type="date"
  :picker-options="pickerOptions"
></el-date-picker>
<el-date-picker
  v-model="end"
  type="date"
  :picker-options="endDatePickerOptions"
></el-date-picker>

export default {
  data() {
    return {
      start: '',
      end: '',
      pickerOptions: {
        disabledDate(time) {
          // 这里的限制是：起始日期和结束日期都不能早于8天前
          return time.getTime() > Date.now() - 8.64e7;
        }
      },
      endDatePickerOptions: {
        disabledDate(time) {
          // 这里的限制是：结束日期不能早于起始日期
          if (this.start) {
            return time.getTime() < new Date(this.start).getTime();
          }
          return time.getTime() > Date.now() - 8.64e7;
        }
      }
    };
  }
}

在这个代码示例中，我们创建了两个日期选择器组件，一个用于选择开始时间，另一个用于选择结束时间。使用不同的“pickerOptions”和“endDatePickerOptions”对象来分别限制开始日期和结束日期。在“endDatePickerOptions”对象中，我们使用了一个条件来确保结束日期不能早于开始日期。如果我们没有选择开始日期，我们使用“Date.now()”来限制结束日期。

示例二：限制时间段内的每一天

<el-date-picker
  v-model="startDate"
  type="date"
  :picker-options="startDatePickerOptions"
></el-date-picker>
<el-date-picker
  v-model="endDate"
  type="date"
  :picker-options="endDatePickerOptions"
></el-date-picker>

export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      startDatePickerOptions: {
        disabledDate(time) {
          // 这里的限制是: 限制8天前以前的日期和结束日期的后一天以后的日期
          if (this.endDate) {
            return time.getTime() > new Date(this.endDate).getTime() - 8.64e7 || time.getTime() < Date.now() - 8.64e7;
          }
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      endDatePickerOptions: {
        disabledDate(time) {
          // 这里的限制是: 确保 endDatePickerOptions 的最早日期是 startDatePickerOptions 的最晚日期后一天.
          if (this.startDate) {
            return time.getTime() < new Date(this.startDate).getTime() + 8.64e7;
          }
          return time.getTime() > Date.now() - 8.64e7;
        }
      }
    };
  }
}

在这个代码示例中，我们创建了两个日期选择器组件，一个用于选择开始日期，另一个用于选择结束日期。使用不同的“startDatePickerOptions”和“endDatePickerOptions”对象来分别限制开始日期和结束日期。在“startDatePickerOptions”对象中，我们使用两个条件给出了两个限制，确保始终只显示给定时间段内的日期。在“endDatePickerOptions”对象中，我们确保结束时间限制在开始时间限制后一天及其之后。

这就是使用Element UI和Vue.js实现时间限制的完整攻略。