el-date-picker组件自定义可选择的时间范围

在使用el-date-picker组件时，如果您想要限制用户只能选择今天和前72小时作为时间范围，可以通过设置disabledDate属性来实现。这个属性接受一个函数，该函数接收一个日期对象，并返回一个布尔值，指示该日期是否应该被禁用。

下面是一个示例代码，展示了如何使用el-date-picker组件来选择只能是今天和前72小时的日期范围：

<template>
  <div>
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :range-separator="'至'"
      :default-value="defaultValue"
      :disabled-date="disabledDate"
      @change="handleChange"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [], // 初始值为空数组
      defaultValue: [new Date(), new Date(Date.now() - 72 * 60 * 60 * 1000)], // 默认值为当前日期和72小时前的日期
    };
  },
  methods: {
    disabledDate(time) {
      const today = new Date();
      const threeDaysAgo = new Date(today.getTime() - 72 * 60 * 60 * 1000);
      return time.getTime() < threeDaysAgo.getTime() || time.getTime() > today.getTime();
    },
    handleChange(value) {
      console.log('选择的日期范围:', value);
      // 在这里处理选择的日期范围
    },
  },
};
</script>

在这个示例中，我们将type属性设置为daterange，以便选择一个日期范围。我们还定义了start-placeholder和end-placeholder属性来指定开始和结束日期的占位符文本。range-separator属性用于定义日期范围之间的分隔符。

defaultValue数据属性被设置为一个包含当前日期和72小时前的日期的数组。这确保了el-date-picker组件在初始渲染时默认显示一个72小时的日期范围。

disabledDate方法是一个自定义函数，它接收一个日期对象，并返回一个布尔值。这个函数检查传入的日期是否早于3天前或晚于今天，如果是，则返回true，表示该日期应该被禁用。
效果图如下：