Vue 中使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解

在Vue中使用el-date-picker组件时，如果需要限制只能选择当天、当天之前或当天之后的日期，可以通过设置picker-options属性来实现。以下是一个示例代码：

<template>
  <el-date-picker
    v-model="date"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        disabledDate(time) {
          // 可根据需要调整这里的日期比较逻辑
          return time.getTime() > Date.now() || time.getTime() < Date.now() - 8.64e7;
        }
      }
    };
  }
};
</script>

在这个例子中，disabledDate函数用于设置不可选择的日期。Date.now()返回当前时间的毫秒数，我们通过比较当前时间和选择器中的日期的毫秒数来判断是否禁用该日期。这里禁用的日期包括当天之后的所有日期以及当天之前的所有日期（不包括昨天，因为Date.now() - 8.64e7计算的是24小时之前的时间，即昨天的这个时候）。