在项目中使用elementUI的datePicker,代码如下:
<el-date-picker
type="daterange"
:clearable="false"
start-placeholder="Begin Date"
end-placeholder="End Date"
:default-time="['00:00:00', '23:59:59']"
>
</el-date-picker>
因为UI设计出来的效果是这样的:
和elementUI的效果有些不同,那个日历的小图标放在了后面。
所以样式做了一些设置,css代码如下:
.el-date-editor--daterange
.el-range__icon.el-icon-date
display: none // 把elementUI默认显示在前面的日历小图标隐藏
.el-range-input
flex 1 // 两个输入框平均分配占满剩余空间
.el-input__icon.el-range__close-icon
font-style: normal
font-size: 16px
width: 16px
&::after
font-family: "element-icons" !important
content: "\e78e" // 把后面的那个小图标改成日历小图标
width: auto
在chrome浏览器下正如UI的要求来显示,但是在firefox下显示却如下图:
日历小图标被挤出去了。
后来发现是flex的问题,把 flex: 1 修改成 flex-grow: 1 则可让firefox的显示和chrome一样了。css代码如下:
.el-date-editor--daterange
.el-range__icon.el-icon-date
display: none // 把elementUI默认显示在前面的日历小图标隐藏
.el-range-input
flex-grow 1 // 两个输入框平均分配占满剩余空间,这里用flex-grow而不用flex,是为了兼容firefox
.el-input__icon.el-range__close-icon
font-style: normal
font-size: 16px
width: 16px
&::after
font-family: "element-icons" !important
content: "\e78e" // 把后面的那个小图标改成日历小图标
width: auto