ElementUI日期组件(DatePicker )图标定制

简介: ElementUI日期组件(DatePicker )图标定制

1.问题


elementUI默认日期组件是这样的:

image.png

想要的效果 :

image.png

需要修改的有两处:

1.将‘至’换成箭头图标

2.将左侧的icon移动到右边

2.解决


总共需要修改的只有三处

template修改:
<el-date-picker
        v-model="value12"
        @change="selectTime"
        type="datetimerange"
        range-separator=""  //这里设置为空字符串
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        />
--------------------------------------------------------------------------------------
style样式新增:--隐藏左侧的图标
::v-deep .el-range__icon {
  display: none;
}
------------------------------------------------------------------------------------
mounted生命周期新增:
mounted () {
    //el-icon-right向右的箭头--可以根据需要换成别的
    document.getElementsByClassName('el-range__close-icon')[0].className += ' el-icon-date' 
    document.getElementsByClassName('el-range-separator')[0].className += ' el-icon-right' 
  }
相关文章
nuxt3:vue-dompurify-html
nuxt3:vue-dompurify-html
682 0
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
2355 0
|
JavaScript 前端开发 jenkins
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
3144 0
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
10134 120
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9868 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
JavaScript 容器
form-create-designer中怎么扩展自定义组件
该内容是关于在某个框架(可能是Vue)中导入和使用自定义组件的教程。首先,通过`import`语句引入自定义组件`MyButton`和`FcDesigner`。然后,使用`FcDesigner.component()`或`app.component()`方法挂载组件。接着,定义组件的拖拽规则,包括其在菜单的位置、图标、名称和唯一ID,以及组件的渲染和属性配置规则。最后,将组件的拖拽规则挂载到设计器(`$refs.designer`)中,以便在界面上使用。
686 2
|
前端开发
ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文
ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文
|
NoSQL 前端开发 Redis
Windows 下安装和配置 Redis (图文教程)
Windows 下安装和配置 Redis (图文教程)
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
964 3
Element-ui 表格 (Table) 组件中动态合并单元格
Element-ui 表格 (Table) 组件中动态合并单元格
1653 0
Element-ui 表格 (Table) 组件中动态合并单元格