问题描述: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;
}
上面是“修改element-ui源码兼容el-date-picker支持年区间选择”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2327.html
workflows工作流
坐落在白雪覆盖的广阔平原上2只可爱的雪豹
《翅膀之王:鸡的团契》海报ComfyUI工作流
奋斗的小黄人ComfyUI工作流
一张科幻照片,火星车在沙漠里ComfyUI工作流
一只白色的孔雀ComfyUI工作流
停在音乐节露营地的一辆复古大众巴士由羊毛制成
树枝上一只色彩斑斓的小鸟
一个黄色的海绵宝宝ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

如何利用svg做一个有趣的loading动画加载
jquery鼠标滑过图片边框特效(jquery.focus-follow插件)
3d文字动画效果
HTML5 Canvas 刻度尺
css3画弹珠,可以滚动!
会议人员60s签到倒计时插件
一个包含老黄历、佛历、道历、星宿等数据的日历网站
纯css3绘制的小鸟











