element -- datepicker 设置可选范围

最新推荐文章于 2025-09-11 00:46:20 发布

原创

最新推荐文章于 2025-09-11 00:46:20 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

本文介绍了如何在ElementUI的日期选择组件中自定义配置，如限制选择日期范围到2021-11-30之后，并添加'昨天'和'今天'快捷选项。通过实例展示了如何设置disabledDate和shortcuts属性来满足特定产品需求。

关于elementUI插件，使用起来是很方便，但是有时候产品的需求导致需要自定义一些配置参数。

就比如：

日期选择框设置选择范围为 2021-11-30 之后的日期为可选择，之前的为禁用状态
添加宽街配置项：今日、昨日

实现之后的效果如下：
红色框里是无法选择的，就算往前翻到11月也是无法选择
在这里插入图片描述

代码：

<template>
	<el-date-picker
          v-model="searchDate"
          type="daterange"
          align="right"
          unlink-panels
          ref="datePicker"
          :clearable="false"
          range-separator="至"
          start-placeholder="开