＜el-date-picker＞实现指定日期禁用

关注

原创最新推荐文章于 2026-02-14 05:22:21 发布 8.7k 阅读 AI 写同款· GEO 优化 ›

无人机频谱侦测与智能识别技术实战解析本文深入解析无人机频谱侦测与智能识别技术实战应用，涵盖无线电侦测、信号处理和定位技术等核心内容。通过频谱分析、特征提取和机器学习算法优化，实现高精度无人机识别与定位，并分享复杂环境下的应对策略和系统集成经验。阅读详情

element组件的<el-date-picker>组件大家经常使用，实现指定某些日期范围禁用，调用官方文档上disabledDate方法。

下面是我实现的小demo,有需要的小伙伴可以直接拿来用。

需求： 默认是当前日期及其前30天可以选择，其他时间段是禁用状态。

核心代码如下：

disabledDate(time){
  return time.getTime() < Date.now() - 8.64e7*30 || time.getTime() >Date.now();
},

<template>
  <div class="block" id="dateTestId">
    <!--有快捷键的日期选择器-->
    <el-date-picker
        v-model="value"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time){
          return time.getTime() < Date.now() - 8.64e7*30 || time.getTime() >Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick',[new Date(), new Date()]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        },]
      },
      value:'',
    };
  }
};
</script>
<style scoped>
#dateTestId >>> .el-date-editor .el-range-separator{
  width: 6% !important;
}
</style>

实现的效果图：

=========================================================================

Tip：如果想修改时间组件的样式，比如隐藏时间选择器的左右选择按钮，可以在项目的公共样式类中修改element样式。因为<style scoped>只针对当前页面有效，而<el-datePicker>组件和项目页面id="app"是平级的关系，设置scoped的组件样式对<el-datePicker>修改无效。

隐藏时间选择器的左右选择按钮样式代码如下：

.el-picker-panel__icon-btn{
display: none;
}

===》效果图：