element UI日期选择器固定选择范围-Toy模板网

这篇具有很好参考价值的文章主要介绍了element UI日期选择器固定选择范围。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目中经常会使用到日期选择器，并且会对可选择的日期有要求，分享几个常用的，给大家作参考。文章来源地址https://www.toymoban.com/news/detail-732754.html

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

<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>

到了这里，关于element UI日期选择器固定选择范围的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！