日历组件（el-calendar）禁用自定义日期范围

原创

已于 2024-07-09 16:04:46 修改 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-06-05 16:56:44 首次发布

效果图：

项目要求：只能操作今日以及以前的日期

由于el-calendar组件未直接提供禁用属性和相关操作，所以实现起来稍微有点麻烦，通过阅读文档还好其提供了插槽（slot="dateCell" slot-scope="{date, data}"），用气扩展可以实现想要的效果。

方案一：插槽中用el-button组件，借用其disable属性

代码实现（无需js操作）

      //vue模板
       <el-calendar class="calendar-style" v-model="rangeTime">
          <template slot="dateCell" slot-scope="{ date, data }">
            <el-button
              type="text"
              :disabled="date > new Date() ? true : false"
              >{
  
  { data.day.split("-").slice(2).join("") }}</el-button
            >
          </template>
        </el-calendar