el-date-picker设置选择的日期范围间隔

可以使用 "min" 和 "max" 属性来设置el-date-picker选择日期的范围间隔，如:

<el-date-picker v-model="date" type="date" placeholder="选择日期" :min="minDate" :max="maxDate"></el-date-picker>

其中 minDate 与 maxDate 是 JavaScript Date 对象。

另外还可以使用 "pickerOptions" 来设置，如：

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

data() {
    return {
        pickerOptions: {
            disabledDate(time) {
                // time 为 JavaScript Date 对象
                return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 8.64e7;
            }
        }
    }
}

pickerOptions 中还有其他的属性可以设置，详情请参考官方文档.

相关问题

el-date-picker设置日期选择间隔范围

在 vue.js 中使用 element-ui 的 el-date-picker 时可以通过设置 "picker-options" 来限制日期选择范围。具体使用方法如下:

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

data() {
  return {
    pickerOptions: {
      disabledDate(time) {
        // time 为一个时间对象
        return time.getTime() < Date.now() - 8.64e7 // 不能选择当天之前的日期
      }
    },
  }
}

picker-options属性中需要传入一个函数，用来判断当前选择的日期是否在限制范围内，满足条件会返回 true，不满足条件会返回 false。
上面的例子是限制不能选择当天之前的日期，大家可以根据实际需求来改变其中的函数。

el-date-picker设置选择的日期范围在48小时

要实现el-date-picker选择的日期范围在48小时的要求，可以使用el-date-picker组件的`disabledDate`属性来实现。具体做法是在该属性的回调函数中判断当前日期与已选日期的间隔是否超过48小时，如果超过则返回`true`禁用该日期，否则返回`false`允许选择该日期。以下是一个简单的示例代码：

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

<script>
export default {
  data() {
    return {
      dateRange: null,
      maxDateInterval: 48, // 最大间隔为48小时
    };
  },
  methods: {
    disabledDate(date) {
      // 如果还没有选择起始日期，则不禁用任何日期
      if (!this.dateRange || !this.dateRange[0]) {
        return false;
      }
      // 计算当前日期与已选起始日期的间隔小时数
      const hours = Math.abs(
        (new Date(date) - new Date(this.dateRange[0])) / (1000 * 60 * 60)
      );
      // 如果间隔小时数超过最大间隔，则禁用该日期
      return hours > this.maxDateInterval;
    },
  },
};
</script>

在上述代码中，我们通过`dateRange`绑定了el-date-picker组件的选择结果，并设置了选择范围为日期时间范围。然后在`disabledDate`回调函数中，我们判断了当前日期与已选起始日期的间隔小时数，如果超过了`maxDateInterval`，则返回`true`禁用该日期，否则返回`false`允许选择该日期。最终，我们将`disabledDate`属性绑定到el-date-picker组件上，就可以实现选择的日期范围在48小时的功能了。