详解element-ui动态限定的日期范围选择器代码片段

下面我将详细讲解“详解element-ui动态限定的日期范围选择器代码片段”的完整攻略。

介绍

在前端开发中，常常需要使用日期选择器。对于界面美观、易用、灵活的要求，我认为element-ui是一个不错的选择。

但是，在一些特殊情况下，我们需要动态限定日期范围选择器的范围，例如选择器A选择了一个日期范围后，选择器B只能选择A选择范围内的日期。本文中，我们将介绍如何使用element-ui实现这个功能。

代码实现

第一步：添加日期选择器组件

首先，在vue组件中，添加element-ui的日期范围选择器。

<el-date-picker
  v-model="rangeDate"
  type="daterange"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions"
  @change="handleChange"
></el-date-picker>

在上述代码片段中，我们可以看到type属性设置为daterange，以便选择日期范围。还可以看到，picker-options属性用于动态设置日期范围下边界和上边界。

第二步：设置日期范围下边界和上边界

为了动态设置日期范围下边界和上边界，请使用watch监听日期范围选择器的值，并根据需求设置pickerOptions属性。

data() {
  return {
    rangeDate: [], // 日期范围选择器的值
    pickerOptions: { // 日期范围选择器的选项
      disabledDate: time => {
        // 禁用时间戳小于startDate的日期
        return time.getTime() < this.startDate
      }
    },
    startDate: Date.now() // 日期范围选择器的下边界
  }
},
methods: {
  handleChange() {
    if (this.rangeDate.length === 2) {
      this.pickerOptions.disabledDate = time => {
        // 禁用时间戳小于startDate或大于endDate的日期
        return time.getTime() < this.startDate || time.getTime() > this.endDate
      }
    } else {
      this.pickerOptions.disabledDate = time => {
        // 没有选中的时候，禁用时间戳小于startDate的日期
        return time.getTime() < this.startDate
      }
    }
  }
},
watch: {
  rangeDate: function (newValue, oldValue) {
    if (newValue.length === 2) {
      this.startDate = newValue[0].getTime()
      this.endDate = newValue[1].getTime()
    } else {
      this.startDate = Date.now()
    }
    this.handleChange()
  }
}

在上述代码片段中，我们使用disabledDate函数禁用了低于下边界或高于上边界的时间戳。当选择了一个日期范围之后，我们才有了下边界和上边界，然后根据情况禁用日期。

当日期范围发生变化时，我们通过watch监听到新值后，根据选择情况设置下边界、上边界和pickerOptions属性。

示例说明

这里给出两个使用示例来解释如何使用我们的代码片段。

示例一

首先，在组件中导入我们的代码片段，然后通过props属性传入当前组件可选时间的最早时间，如下所示。

<template>
  <el-form-item label="时间范围">
    <CustomDateRangePicker :min-date="minDate" v-model="dateRange"></CustomDateRangePicker>
  </el-form-item>
</template>

<script>
import CustomDateRangePicker from './CustomDateRangePicker'

export default {
  components: { CustomDateRangePicker },
  data() {
    return {
      minDate: new Date('2020-01-01'),
      dateRange: []
    }
  }
}
</script>

在上述代码片段中，我们将minDate设置为当前组件可选时间的最早时间，将dateRange设置为当前组件日期范围选择器的值。

我们在CustomDateRangePicker组件的代码中添加我们的日期组件，并根据日期范围选择器选定的日期动态限定日期选择范围。

<template>
  <el-date-picker
    v-model="rangeDate"
    type="daterange"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    @change="handleChange"
    :disabled="disabled"
  ></el-date-picker>
</template>

<script>
export default {
  props: {
    minDate: {
      type: Date,
      default: new Date('2020-01-01')
    }
  },
  data() {
    return {
      rangeDate: [],
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() < this.minDate
        }
      },
      startDate: Date.now()
    }
  },
  methods: {
    handleChange() {
      if (this.rangeDate.length === 2) {
        this.startDate = this.rangeDate[0].getTime()
        this.endDate = this.rangeDate[1].getTime()
      } else {
        this.startDate = Date.now()
      }
      this.handleChangeOptions()
    },
    handleChangeOptions() {
      if (this.rangeDate.length === 2) {
        this.pickerOptions.disabledDate = time => {
          return time.getTime() < this.startDate || time.getTime() > this.endDate
        }
      } else {
        this.pickerOptions.disabledDate = time => {
          return time.getTime() < this.minDate
        }
      }
    }
  },
  watch: {
    rangeDate(newValue, oldValue) {
      this.handleChange()
    }
  },
  computed: {
    disabled() {
      return !this.minDate
    }
  }
}
</script>

在上述代码片段中，我们使用传入的minDate设置日期选择器的下边界。当一个新的日期范围被选择时，我们根据选择的日期限定日期范围选择器的日期选择范围。

示例二

我们在一个简单的网页中展示如何使用上述代码片段。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>日期范围选择器示例</title>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-date-picker
      v-model="rangeDate"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="handleChange"
    ></el-date-picker>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        rangeDate: [],
        pickerOptions: {
          disabledDate: time => {
            return time.getTime() < Date.now()
          }
        },
        startDate: Date.now()
      },
      methods: {
        handleChange() {
          if (this.rangeDate.length === 2) {
            this.startDate = this.rangeDate[0].getTime()
            this.endDate = this.rangeDate[1].getTime()
          } else {
            this.startDate = Date.now()
          }
          this.handleChangeOptions()
        },
        handleChangeOptions() {
          if (this.rangeDate.length === 2) {
            this.pickerOptions.disabledDate = time => {
              return time.getTime() < this.startDate || time.getTime() > this.endDate
            }
          } else {
            this.pickerOptions.disabledDate = time => {
              return time.getTime() < Date.now()
            }
          }
        }
      },
      watch: {
        rangeDate(newValue, oldValue) {
          this.handleChange()
        }
      }
    })
  </script>
</body>

</html>

在上述代码片段中，我们在一个简单的网页中展示了如何使用我们的代码片段。具体来说，我们创建了一个包含el-date-picker元素的页面，设置了pickerOptions选项，并在handleChange函数中设置了日期选择器的下边界和上边界。