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

1.问题

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

想要的效果：

需要修改的有两处：

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

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

2.解决

总共需要修改的只有三处

template修改：<el-date-pickerv-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' }

ElementUI日期组件(DatePicker )图标定制相关推荐

element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
elementUI 日期选择器datepicker 设置禁用日期
本例记录ElementUI中DatePicker(日期选择器)设置日期项禁用状态的实现. 下图中将DatePicker的type设置为year,展示为年份选择器: 可以看到上图中2022.2023.2 ...
element-ui日期选择器datepicker限制最大选择日期范围
如图,需求为最多选择范围为七天 <el-date-pickerv-model="pickerDate"type="daterange":picker-op ...
iview DatePicker日期组件禁止选择今天之后的日期不包括今天
1.日期组件 <DatePicker type="date" :options="options" placeholder="请选择日期&quo ...
elementui中日期组件，日期图标在右边，有删除图标（完整代码）
效果图: 日期组件完整代码: <template><div class="date-picker"><el-date-pickerv-model=&q ...
elementUI时间日期组件设置的默认时间在ie中无法重置
在使用elementUI的时间日期组件时往往会设置一个默认时间,此时如果同时设置了placeholder属性,在第一次进入页面时直接重置,调用elementUI的重置表单方法resetField,在I ...
使用elementUI中的date-picker组件年月日显示英文
date-picker组件从英文转换为中文一.date-picker显示英文二.问题原因三.解决办法 -- 引入并注册使用中文版elementUI 一.date-picker显示英文二.问题原 ...
自己封装了一个带有比较日期的datepicker组件
一个简单的带有快捷键和比较日期的date组件,参数较少,便捷,尤其针对实现数据统计模型需要跟之前日期对比功能 npm链接:www.npmjs.com/package/com- GitHub链接:git ...
php 今天明天后天显示10天,【微信小程序】实现含有今天，明天，后天的日期组件...
封面图.JPG 前言做过微信小程序的前端er都知道,小程序有个日期组件,叫picker,但是,需求方要求日期和时间都要显示的,用picker组件的话,那就用到两个picker,date和time,就 ...

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

1.问题

2.解决

ElementUI日期组件(DatePicker )图标定制相关推荐

最新文章

热门文章