web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

修改element-ui源码兼容el-date-picker支持年区间选择

1259 ℃

问题描述:el-date-picker原本用的是monthrange月区间选项,后来想改成年区间,el官网没有这个组件,下面是结合百度搜索+实际情况,已经过测试给出的结果!

1、引入组件

<el-date-picker
  v-model="value"
  type="yearrange"
  align="right"
  unlink-panels
  range-separator="至"
  :format="yyyy"
  :value-format="yyyy"
  :start-placeholder="beginDate"
  :end-placeholder="endDate"
></el-date-picker>

//type="yearrange"这是重点

2、下载2文件替换js文件

点击下载

找到node_moduleselement-uilibdate-picker.js替换掉
找到node_moduleselement-uilibelement-ui.common.js替换掉

3、在element-ui/index.css新增以下样式

.el-year-table td {
    padding: 8px 0;
}
.el-year-table td  div {
    height: 48px;
    padding: 6px 0;
    box-sizing: border-box;
}
.el-year-table td div .cell {
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
}
.el-year-table td.start-date div {
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}
.el-year-table td.end-date div {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}
.el-year-table td.in-range div {
    background-color: #f2f6fc;
}
.el-year-table td.start-date .cell,
.el-year-table td.end-date .cell {
    color: #fff;
    background-color: #409eff;
}
.el-year-table td.today.start-date .cell,
.el-year-table td.today.end-date .cell {
    color: #fff;
}

el-time-picker设置默认赋值时间

Vue项目如何实现文件上传(附完整代码)

Vue开发中最常用的几种UI组件库

vue语法如何设置el-select默认值

el-tree组件如何添加虚线指示

标签: el-date-picker, element-ui, 时间控件, 时间组件

上面是“修改element-ui源码兼容el-date-picker支持年区间选择”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2327.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计1052个字,预计阅读时长8分钟
生活小工具,收录了80多款小工具
上一篇: 基于JavaScrip的web动画库——GSAP
下一篇: 免费商用中文字体——优设鲨鱼菲特健康体
x 打工人ai神器