element-ui 限制日期选择的方法(datepicker)

当使用 element-ui 中的 datepicker 组件进行日期选择时，有时候需要对日期进行限制，例如不能选择过去日期等。下面是针对此种情况的 element-ui 限制日期选择的方法：

1. 使用可选日期范围

最基本的限制方法是使用 picker-options 属性，该属性用于组件设置，以限制 datepicker 组件中可选日期的范围，用户无法选择超出范围的日期。

下面是示例代码：

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

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

在上面的示例中，设置了一个 pickerOptions 对象，里面包含一个 disabledDate 函数，该函数返回值为 true 表示该时间不可选择。在该示例中，我们定制了一个禁用时间的条件：time.getTime() < Date.now() - 8.64e7，该条件表示当时间超过 24 小时之前时，则不能选择。这种方式可以根据自己的需求，定制比较多样化的禁用条件。

2. 使用快捷选项

element-ui 还支持通过 shortcuts 属性来设置快捷选项，以此来限制可选的日期。例如，我们可以设置今天以后的日期不能选择，如下：

<template>
  <el-date-picker
    v-model="date"
    type="date"
    :shortcuts="shortcuts"
    :disabled-date="disabledDate">
  </el-date-picker>
</template>

<script>
  export default {
    data() {
      return {
        date: '',
        shortcuts: [{
          text: '今天以后',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }],
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      };
    }
  };
</script>

在上面的示例中，我们设置了一个 shortcuts 数组，数组中包括一个对象，该对象包含了一个 text 属性和一个 onClick 属性。该示例中，我们设置快捷按钮的文本为“今天以后”，同时设置点击该按钮后选择的日期为当前日期，从而实现了限制日期的目的。

以上就是 element-ui 限制日期选择的两种方法，分别是使用可选日期范围和使用快捷选项，在实际开发中，可以根据实际需求来选择合适的方法。