element UI日期选择器固定选择范围

最新推荐文章于 2026-04-05 09:26:27 发布

原创最新推荐文章于 2026-04-05 09:26:27 发布 · 1.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

文章提供了三种Vue.js日期选择器的使用示例：禁止选择当前日期之后的日期，只允许选择包括当前日期在内的过去日期，以及限定特定日期范围如2022年12月1日至当前日期的选择。这些示例对于前端开发中对日期输入有特定要求的场景非常有用。

项目中经常会使用到日期选择器，并且会对可选择的日期有要求，分享几个常用的，给大家作参考。

只能选择当前日期前（不包含当前日期）

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

<script>
export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate(time) {
          const now=8.64e7;
          return time.getTime()  > Date.now()-now;
        }
      }
    };
  }
};
</script>

只能选择当前日期前（包含当前日期）

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

<script>
export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime()  > Date.now();
        }
      }
    };
  }
};
</script>

指定日期范围（例如2022年12月1日至当前日期）

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

<script>
export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate(time) {
          const startDate = new Date('2022-12-01');
          const endDate = new Date();
          return time < startDate || time > endDate;
        }
      }
    };
  }
};
</script>