el-date-picker日期范围限制的实现

下面我来详细讲解“el-date-picker日期范围限制的实现”的完整攻略。

创建日期范围限制的实现

在实现日期范围限制之前，需要使用 Element UI 中的 el-date-picker 组件来创建日期选择器。el-date-picker 组件可通过 picker-options 属性来设置自定义的配置项，从而实现日期范围限制。

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

在上述代码中，定义了一个 el-date-picker 组件，并使用 picker-options 属性来传递所需的配置项，除此之外还定义了一个 selectedDate 变量，用于双向数据绑定实现选中日期的支持。下面是完整的逻辑代码：

<script>
export default {
  data() {
    return {
      selectedDate: '',
      pickerOptions: {
        disabledDate(time) {
          // 获取当前日期
          const date = new Date()

          // 获取当日零点时间戳
          const zeroTimeStamp = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()

          // 获取本月第一天零点时间戳
          const firstDayTimeStamp = new Date(date.getFullYear(), date.getMonth(), 1).getTime()

          // 获取本月最后一天零点时间戳
          const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)
          const lastDayTimeStamp = new Date(lastDay.getFullYear(), lastDay.getMonth(), lastDay.getDate()).getTime()

          // 获取下个月第一天零点时间戳
          const nextMonthFirstDayTimeStamp = new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime()

          return time.getTime() < zeroTimeStamp ||
            (time.getTime() > lastDayTimeStamp) ||
            (time.getTime() > zeroTimeStamp && time.getTime() < firstDayTimeStamp) ||
            (time.getTime() > nextMonthFirstDayTimeStamp)
        }
      }
    }
  }
}
</script>

在上述代码中，定义了一个 pickerOptions 对象，并设置了一个 disabledDate 函数来计算可选日期的范围，以达到限制表单的目的。disabledDate 函数接收一个 time 参数，表示当前循环日期的时间戳，通过计算各个时间戳的范围，最终返回一个布尔值，告诉选择器该日期是否可选。

示例说明

示例一：限制今日之前的日期不可选

假设现在需要限制选择器的日期只能往后选择，而今日之前的日期不可选，则可以使用下面的代码实现：

disabledDate(time) {
  return time.getTime() < Date.now() - 86400000
}

在上述代码中，使用了 Date.now() 方法来获取当前时间戳，86400000 表示一天的时间戳，所以 Date.now() - 86400000 就是今日的零点时间戳，即今日之前的日期不可选。

示例二：限制可选日期在本月内

假设现在需要限制选择器的日期仅能在本月内选择，那么可以使用下面的代码实现：

disabledDate(time) {
  // 获取当前日期
  const date = new Date()

  // 获取当日零点时间戳
  const zeroTimeStamp = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()

  // 获取本月第一天零点时间戳
  const firstDayTimeStamp = new Date(date.getFullYear(), date.getMonth(), 1).getTime()

  // 获取本月最后一天零点时间戳
  const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)
  const lastDayTimeStamp = new Date(lastDay.getFullYear(), lastDay.getMonth(), lastDay.getDate()).getTime()

  return time.getTime() < zeroTimeStamp || (time.getTime() > lastDayTimeStamp) ||
    (time.getTime() > zeroTimeStamp && time.getTime() < firstDayTimeStamp) ||
    (time.getTime() > nextMonthFirstDayTimeStamp)
}

在上述代码中，计算了本月第一天和最后一天的零点时间戳，并通过当前时间戳，计算出选择器的可选范围。