el-date-picker 时间组件修改默认图标

您可以使用 `prefix-icon` 和 `clear-icon` 属性来修改 `el-date-picker` 组件的默认图标。具体操作如下：

1. 修改前缀图标：

<el-date-picker
  prefix-icon="el-icon-date"
  ...
></el-date-picker>

2. 修改清空图标：

<el-date-picker
  clear-icon="el-icon-circle-close"
  ...
></el-date-picker>

您可以将上述代码添加到您的 `el-date-picker` 组件中，并将图标名称替换为您想要的图标即可。

相关问题

el-date-picker 时间组件将默认的日历小图标自定义为背景图片

您可以使用 `el-date-picker` 组件的 `picker-options` 属性来自定义日历小图标的背景图片。具体实现方法如下：

1. 在 `picker-options` 对象中添加 `iconClass` 属性，将其值设置为一个自定义的 CSS 类名，例如：`my-icon`。

2. 在 CSS 样式表中定义 `.my-icon` 类的样式，将其 `background-image` 属性设置为您想要的背景图片的 URL。

以下是一个示例代码：

<template>
  <el-date-picker
    v-model="date"
    type="datetime"
    :picker-options="{ iconClass: 'my-icon' }"
  ></el-date-picker>
</template>

<style>
.my-icon {
  background-image: url('path/to/your/image.png');
}
</style>

注意：如果您使用的是 CDN 引入的 `element-ui`，则需要将 CSS 样式表中的 `.my-icon` 类定义写在 `style` 标签内，并添加 `!important` 属性，以覆盖默认样式。例如：

<template>
  <el-date-picker
    v-model="date"
    type="datetime"
    :picker-options="{ iconClass: 'my-icon' }"
  ></el-date-picker>
</template>

<style>
.my-icon {
  background-image: url('path/to/your/image.png') !important;
}
</style>

el-date-picker 修改前缀图标

在 Element UI 的 `el-date-picker` 组件中，如果你想修改日期选择器的前缀图标，主要是指日历的图标，你可以通过自定义主题或者直接修改组件的样式来实现。以下是两个方法：

1. **自定义主题**:
- 首先，在你的项目中安装 Element UI 的主题配置工具，如 `element-ui-codemod`：

     npm install element-ui-codemod --save-dev

- 然后，创建一个主题文件 `theme.js` 或者在已有的主题文件中添加：

     import { DatePicker } from 'element-ui';
     export default {
       components: {
         DatePicker: {
           props: {
             ...DatePicker.props,
             prefixIcon: '<svg class="custom-prefix-icon" />', // 自定义的图标HTML代码
           },
         },
       },
     };

- 将这个主题应用到你的 Vue 项目中。

2. **修改 CSS 样式**:
直接在你的 CSS 文件中，针对 `.el-date-picker__icon-button` 类选择器修改 `&::before`伪元素的背景图片或内容：

   .el-date-picker__icon-button::before {
     content: '\e60c'; // 更改为你的图标对应的 Unicode 字符，或使用绝对路径的 SVG 图标
   }

记得更新完图标后，如果需要显示在模态框内，可能还需要调整其 display 属性来覆盖默认样式。