基于element-ui的年份范围选择器

基于element-ui的年份范围选择器

element-ui官方只有日期范围和月份范围选择器,根据需求场景需要,支持年份选择器,原本使用两个分开的年份选择器实现的,但是往往有些是不能接受的。在网上找了很多都没有合适的,所以打算自己改造一个,仅供码友们参考。

  1. 下载对应的代码到本地 文件地址,以下是我的目录结构,我将下载的文件放到了src/components下。

  2. 全局引入或者局部引入使用

    全局引入

    javascript 复制代码
     import DatePicker from '@/components/datePicker/src/date-picker.js'
     Vue.component(DatePicker.name, DatePicker)

    局部引入

    javascript 复制代码
     import DatePicker from '@/components/datePicker'
  3. 调用方法,下面的参数和element-ui原有el-date-picker的api保持不变

    javascript 复制代码
     <date-picker
       type="yearrange"
         v-model="filter1"
         value-format="yyyy"
         format="yyyy年"
         range-separator="至"
         start-placeholder="开始年份"
         end-placeholder="结束年份"
       ></date-picker>
  4. 日期限制处理(禁用),下面我以我这边的需求为例,

    1. 选择的年份需等于或小于当前年份
    2. 选择的年份范围必须在三年之内
javascript 复制代码
  data () {
    return {
      timeRange: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.timeRange = minDate
          if (maxDate) this.timeRange = ''
        },
        disabledDate: time => {
          if (this.timeRange) {
            const minTime = this.timeRange - 3
            const maxTime = this.timeRange + 3
            return (
              dayjs(time).format('YYYY') < minTime ||
              dayjs(time).format('YYYY') > maxTime ||
              time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
            )
          } else {
            return (
              time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
            )
          }
        }
      }
    }
  }

最终效果

iShot_2023-09-07_14.44.04

相关推荐
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
YH丶浩3 天前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
个人看法3 天前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
西洼工作室5 天前
设计模式与原则精要
前端·javascript·设计模式·vue
雪山上的小灰熊5 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
fcm197 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸7 天前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别
瓯雅爱分享7 天前
基于Java后端与Vue前端的MES生产管理系统,涵盖生产调度、资源管控及数据分析,提供全流程可视化支持,包含完整可运行源码,助力企业提升生产效率与管理水平
java·mysql·vue·软件工程·源代码管理
邂逅星河浪漫8 天前
【Spring AI】Ollama大模型-智能对话实现+项目实战(Spring Boot + Vue)
java·人工智能·spring boot·vue·prompt·agent·ollama
知识分享小能手8 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react