el-date-picker日期选择限制范围的实例代码

下面是关于el-date-picker日期选择限制范围的实例代码的完整攻略。

1. 前置知识

在讲解实例代码之前，我们需要掌握以下基本知识：

• el-date-picker是一个基于element-ui的日期选择器组件；
• el-date-picker可以通过picker-options属性限制日期选择的范围；
• picker-options中可以设置disabledDate属性来禁用某些日期。

有了以上的前置知识，我们就能够更好的理解实例代码的具体实现方式了。

2. 实例代码

下面，我们来看一个el-date-picker日期选择限制范围的实例代码。

示例1：限制日期选择范围为过去的七天

首先，我们需要在模板中引入el-date-picker组件，并定义一个date变量用于存储选择的日期：

<template>
  <div>
    <el-date-picker
      v-model="date"
      :picker-options="pickerOptions"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() || time.getTime() < Date.now() - 7 * 24 * 60 * 60 * 1000;
        }
      }
    };
  }
};
</script>

在上述代码中，我们定义了一个pickerOptions对象，该对象中有一个disabledDate方法，用于限制日期选择范围为过去的七天。

在disabledDate方法中，我们通过time.getTime()获取el-date-picker组件选择的日期对应的时间戳，然后判断该时间是否大于当前时间或小于过去七天的时间。

示例2：禁用节假日和周末日期

下面，我们再来看一个示例：如何禁用节假日和周末日期？

<template>
  <div>
    <el-date-picker
      v-model="date"
      :picker-options="pickerOptions"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        disabledDate(time) {
          // 禁用节假日
          const holidays = ['2022-01-01', '2022-01-02', '2022-01-03', '2022-02-01'];
          const formatTime = new Date(time).toLocaleDateString().replace(/\//g, '-');
          if (holidays.includes(formatTime)) {
            return true;
          }

          // 禁用周末
          return time.getDay() === 6 || time.getDay() === 0;
        }
      }
    };
  }
};
</script>

在上述示例中，我们的pickerOptions对象中的disabledDate方法，首先通过数组holidays来存储节假日日期，然后通过.toLocaleDateString()方法将选择的日期转为字符串格式，最后判断该日期是否在节假日数组holidays中，如果是，则返回true禁用该日期。

接着，我们通过time.getDay()方法获取选择日期的星期几，如果是周六或周日，则返回true禁用该日期。这样，我们就成功禁用了节假日和周末日期。

3. 总结

通过上述两个示例，我们可以对el-date-picker日期选择限制范围的实现方式有所了解。在实际开发中，我们可以根据实际需求，设置不同的disabledDate方法来实现日期选择的定制化。