element-ui的年份范围选择器，选择的年份需等于或小于当前年份，选择的年份范围必须在三年之内

小魔女千千鱼2024-04-10 11:16

写在前面

日期限制处理（禁用），下面我以我这边的需求为例，

选择的年份需等于或小于当前年份

选择的年份范围必须在三年之内

1.限制起始日期小于截止日期

1）根据用户选中的开始日期，置灰不可选的日期范围；

2）如果用户先选择截止日期，再选择的开始日期，且开始日期大于截止日期，清空截止日期；


javascript 复制代码 
  <div class="min-wid data-flex-start" >
          <span class="with-hide">年</span><span class="with-d with-s">年</span>
          <div class="year-range-picker">
            <el-date-picker
              v-model="dateList[0]"
              :picker-options="startDatePicker"
              type="year"
              placeholder="选择开始年"
              size="mini"
              class="year-picker"
              format="yyyy"
              value-format="yyyy"
              @change="handleDateChange"
            />
            <span class="range-word"> 至 </span>
            <el-date-picker
              :key="randomKey "
              v-model="dateList[1]"
              :picker-options="endDatePicker"
              :default-value="dateDefaultShow"
              type="year"
              placeholder="选择结束年"
              size="mini"
              class="year-picker"
              value-format="yyyy"
            />
          </div>
        </div>
html 复制代码 
 data() {
    return {
      randomKey: 0,
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
      dateDefaultShow: '', // 日期选择器的日期默到选择的年份
      datatimeStr: {
        dateBegin: '',
        endDataDate: ''
      },
      minNowDate: '',
      maxNowDate: '',
      dateList: ['', '']
      }
      }
javascript 复制代码 
 methods: {
    // 获取日期 disabledDate 函数用于定义哪些日期应该被禁用。禁止选择大于特定日期的日期。
    // 选择年份范围选择时开始时间不能大于结束时间，结束时间不能小于开始时间
    // 提出开始时间必须小于提出结束时间
    beginDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.dateList[1] !== '') {
            const fixedTime = new Date(time)
            return fixedTime.getFullYear() > self.dateList[1]
          }
        }
      }
    },
    // 提出结束时间必须大于提出开始时间
    processDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.dateList[0] !== '') {
            const fixedTime = new Date(time)
            if ((Number(self.maxNowDate) - Number(self.dateList[0])) <= 2) {
              return fixedTime.getFullYear() > self.maxNowDate || fixedTime.getFullYear() < self.dateList[0]
            } else {
              return fixedTime.getFullYear() > (self.maxNowDate - (Number(self.maxNowDate) - Number(self.dateList[0])) + 2) || fixedTime.getFullYear() < self.dateList[0]
            }
          }
        }
      }
    },
    // 获取最大日期
    getMaxDate() {
      getDataDate().then(res => {
        // 默认结束年为有数据的最近年，默认开始年为默认结束年-2，即默认时间范围为3年
        this.maxNowDate = res.slice(0, 4)
        this.minNowDate = this.maxNowDate - 2
        this.dateList[0] = this.minNowDate.toString()
        this.dateList[1] = this.maxNowDate
        // 强制刷新
        this.$forceUpdate()
      }).catch(err => {
        console.log(err)
      })
    },
    // 当开始日期改变时的处理函数
    // 如果截止日期早于开始日期3年以上，将截止日期清空
    handleDateChange() {
      // 当选择的开始日期比结束日期早三年以上时，清空结束日期
      if (this.dateList[1] - 2 > this.dateList[0]) {
        this.dateList[1] = ''
        // 改变数组内的值，强制刷新，清空结束日期的显示
        this.randomKey = Math.random()
      }
      // 日期选择器定位到选择的开始年份
      this.dateDefaultShow = this.dateList[0]
    }
    }
css 复制代码 
<style scoped>
  /* 顶部样式 */
  .card-head{
    padding:12px 16px;
    background-color: #fff;
    position:relative;
  }
  /* 数据日期字体样式 */
  .date-font{
    color: var(---Gray-6, #78808F);
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
  }
  /*弹性布局：两端对齐 */
  .data-flex-sabw{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* 弹性布局：左对齐*/
  .data-flex-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  /* 弹性布局：右对齐*/
  .data-flex-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .tp-con{
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    display: flex;
    padding: 12px 0px;
    align-items: flex-start;
    gap: 20px;
  }
  /*隐藏显示，占位*/
  .with-hide {
    opacity: 0;
    color: var(---Neutral-8, #292929);
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .with-d {
    width: 24px;
  }
  .with-t {
    width: 80px;
  }
  .with-l {
    width: 38px;
  }
  .with-s {
    box-sizing: border-box;
    padding-right: 8px;
    color: var(---Neutral-8, #292929);
    text-align: right;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .st_line {
    box-sizing: border-box;
    margin: 0 2px;
    width: 9px;
    height: 22px;
    color: var(---Gray-6, #78808F);
    text-align: center;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .min-wid{
    min-width:160px;
  }
  .query-bt {
    background-color: #00B0B0;
    color: #FFF;
    outline: none;
  }
  .center-deep{
    hight: 100%;
    width: 100%;
    background-color: #fff;
    margin-top: 16px;
  }
  /deep/ .treeselect-main {
    width: 204px;
    line-height: 28px;
  }
  /deep/ .vue-treeselect__placeholder {
    line-height: 28px;
  }
  /deep/ .vue-treeselect__control {
    height: 32px !important;
    line-height: 32px;
    border-radius: 4px;
  }
  /deep/.vue-treeselect__single-value {
    font-size: 14px;
    top: 0%;
    color: #606266;
    font-weight: 400;
  }
  /deep/.vue-treeselect__input {
    height: 32px;
    line-height: 32px;
  }
  /*顶部筛选器输入框宽度*/
  /deep/.el-select el-select--small,el-input el-input--small el-input--suffix{
    width: 100% !important;
    flex: 1;
  }
  /*年范围选择器*/
  .year-range-picker {
    color: black;
    text-align: center;
    border: 1px solid #dcdfe6;
    border-radius:4px;
    line-height: 32px;
    overflow: hidden;
    display: flex;
    margin: 4px 0;
  }
  /deep/.el-input--mini .el-input__inner {
    height: 32px;
    line-height: 32px;
    border: none
  }
  .range-word {
    box-sizing: border-box;
    padding-top: 6px;
    color: var(---Neutral-8, #292929);
    text-align: right;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
  }

  .year-range-picker .year-picker {
    max-width: 150px;
    margin:0;
  }
</style>

参考文章：ElementUI 年份范围选择器 el-year-picker
点开是关联的组件-基于element-ui的年份范围选择器
vue中element-ui日期选择组件el-date-picker 清空所选时间，会将model绑定的值设置为null 问题 及 限制起止日期范围
vue elementui时间控件，（单框同时选）范围选择周，季，年。
element ui datepicker时间控件实现范围选择周，季，年。
ElementUI年份范围选择器功能实现
element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间
vue2、vue3中使用$forceUpdate()

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~

相关推荐
黑金IT8 小时前
Python3 + Qt5：实现AJAX异步更新UI
qt·ui·ajax
喵叔哟13 小时前
5. 【Vue实战--孢子记账--Web 版开发】-- 主页UI
前端·vue.js·ui
山海青风1 天前
Axure入门教程 -- 第五章：原型优化与调试
ui·交互·axure
浅陌sss3 天前
Unity 粒子特效在UI中使用裁剪效果
ui·unity·游戏引擎
机器视觉小小测试员3 天前
工业相机常用词语解释
运维·ui·自动化·工业相机
PersistJiao4 天前
Couchbase UI: Search
ui·couchbase
时光追逐者4 天前
一组开源、免费、Metro风格的 WPF UI 控件库
ui·开源·c#·.net·wpf·.netcore·微软技术
专注VB编程开发20年4 天前
代替Winform、Win32控件的一些界面框架Electron,QT等
前端·c++·ui·框架·界面
军训猫猫头5 天前
58.界面参数传递给Command C#例子 WPF例子
开发语言·ui·c#·wpf
半城风月-5 天前
Vue 2 + Element UI 实现密码显示、隐藏切换功能
vue.js·ui·elementui
热门推荐
01DeepSeek r1本地安装全指南02【deepseek】deepseek-r1本地部署-第一步：下载LM Studio03将DeepSeek接入Word，打造AI办公助手04DeepSeek学术写作测评第一弹：论文润色，中译英效果如何？05使用Ollama 在Ubuntu运行deepseek大模型：以DeepSeek-coder为例06Dell服务器升级ubuntu 22.04失败解决07DeepSeek 云端部署，释放无限 AI 潜力！08新鲜速递：DeepSeek-R1开源大模型本地部署实战—Ollama + MaxKB 搭建RAG检索增强生成应用09半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)10deepseek v1手机端部署