当前位置:首页 » 《随便一记》 » 正文

Vue3+ElementPlus el-date-picker设置可选时间范围

18 人参与  2024年03月27日 18:50  分类 : 《随便一记》  评论

点击全文阅读


需求: 选择年份,对应的日期范围选择器跟随年份变化,只可选当前年份


ElementPlus的el-data-picker没有picker-options属性,但是提供了default-value属性可以设置不可选的日期
 

      <el-form-item label="起止日期">        <el-date-picker          v-model="daysPicker.value"          type="daterange"          :clearable="false"          :default-value="defaultDate"          :disabled-date="disabledDateFun"          range-separator="至"          start-placeholder="开始"          end-placeholder="截止"          @change="pickDays"        />      </el-form-item>

这里我们定义一个方法disabledDateFun用来筛选符合要求的日期,接受一个date格式的对象作为参数,返回格式为Boolean

    // 此函数接受date作为参数 通过判断是否符合要求 返回是否禁用即true或者false    disabledDateFun(date) {    // 这里我判断的是年份字符串是否等于form表单所选的年份 是则返回false ,否则禁用 返回true 具体根据你们的业务需求来判断      if (!this.form.year) return false      const year = date.getFullYear().toString()      return year !== this.form.year    },

其中我为了让选择年份后,默认日期变为所选年份的日期,设置了default-value,参考官方文档这个根据业务需求配置,好以下是演示图:

 

如图,选年份为2022则,默认可选范围为2022年内所有日期,其余为灰色不可选 

 

 


点击全文阅读


本文链接:http://zhangshiyu.com/post/86827.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1