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

最新推荐文章于 2025-04-17 15:56:24 发布

study_7forever

最新推荐文章于 2025-04-17 15:56:24 发布

阅读量8.4k

点赞数 5

文章标签： elementui vue.js 前端 el-date-picker 日期时间选择器

本文链接：https://blog.youkuaiyun.com/study_7forever/article/details/121772192

版权

本文介绍如何使用Element UI的<el-date-picker>组件，通过disabledDate方法实现禁用指定日期范围的功能。示例需求为：默认可选当前日期及其前30天，其余日期禁用。同时分享了隐藏时间选择器左右箭头按钮的样式修改方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

===》效果图：