el-date-picker尾部图标

el-date-picker尾部图标可以通过修改样式或在标签中添加prefix-icon属性来实现。样式修改可以通过以下步骤完成：
1. 在style标签中添加以下代码：`.prefix-icon-class { display: none; } .el-input__icon { /* 移动后的icon高度100%会造成不居中 */ height: 40px; }`
2. 在mounted生命周期中添加以下代码：`document.getElementsByClassName('el-input__icon').classList.remove('el-range__close-icon') document.getElementsByClassName('el-input__icon').classList.add('el-icon-date')`

另外，也可以在el-date-picker标签中添加`prefix-icon`属性，并设置相应的类名，例如`prefix-icon="prefix-icon-class"`。

相关问题

el-date-picker 尾部自定义图标

el-date-picker组件提供了一个属性slot来实现尾部自定义图标的功能。具体实现方法如下所示：

<el-date-picker
  v-model="date"
  type="date"
  placeholder="选择日期"
  :picker-options="pickerOptions">
  <template slot="footer">
    <span style="float: right; margin-right: 10px">
      <el-button size="small" type="text" @click="date = ''">清空</el-button>
      <el-button size="small" type="primary" @click="$refs.datePicker.confirm()">确定</el-button>
    </span>
  </template>
</el-date-picker>

在el-date-picker组件中，我们使用了slot属性来定义了一个名为footer的插槽，然后在插槽中定义了两个按钮，一个用于清空日期，一个用于确认日期。这样就可以实现尾部自定义图标的功能了。

使用vue2修改下述代码，el-date-picker初始值分别为今天0点和明天0点。让el-slider滑块控制el-date-picker的时间，滑块的初始最大最小值为el-date-picker的初始值的getTime()，滑块滑动时与el-date-picker联动。 <div> <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> <el-slider range style="padding:0 12px;" @change="onChange"></el-slider> </div>

<>
<div>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-value="defaultValue"
:picker-options="pickerOptions"
></el-date-picker>
<el-slider
range
style="padding: 0 12px;"
:min="min"
:max="max"
v-model="sliderValue"
@change="onSliderChange"
></el-slider>
</div>
</template>

<script>
export default {
data() {
return {
value1: [new Date(), new Date(Date.now() + 86400000)],
sliderValue: [new Date().getTime(), new Date(Date.now() + 86400000).getTime()],
pickerOptions: {
selectableRange: '00:00:00 - 23:59:59'
}
}
},
computed: {
min() {
return this.value1[0].getTime()
},
max() {
return this.value1[1].getTime()
},
defaultValue() {
return [new Date(new Date().toLocaleDateString()), new Date(new Date().toLocaleDateString() + ' 23:59:59')]
}
},
methods: {
onSliderChange() {
const [start, end] = this.sliderValue
this.value1 = [new Date(start), new Date(end)]
}
}
}
</script>