Как изменить иконку календаря по умолчанию у date picker element plus?

Для изменения иконки календаря по умолчанию у элемента выбора даты (date picker) в Date Picker от Element Plus сначала необходимо импортировать нужные стили и иконки в ваш проект. Element Plus по умолчанию использует Font Awesome и встроенные иконки, но можно использовать и кастомные иконки.

Вот пример того, как можно изменить иконку календаря на кастомную иконку с использованием Element Plus:

1. Установите необходимые зависимости, если они еще не установлены:

npm install @fortawesome/fontawesome-free

2. Далее вам нужно добавить стили Font Awesome в ваш проект. Вы можете сделать это, например, в файле main.js:

import '@fortawesome/fontawesome-free/css/all.css';

3. Затем вы можете создать компонент Vue, который будет использовать Date Picker из Element Plus и настроить его так, чтобы он использовал кастомную иконку календаря:

<template>
  <el-date-picker
    v-model="date"
    type="date"
    placeholder="Выберите дату"
    value-format="dd.MM.yyyy"
    picker-options="pickerOptions"
  >
  </el-date-picker>
</template>
<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        shortcuts: [
          {
            text: 'Today',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }
        ]
      }
    };
  }
};
</script>
<style lang="scss">
.el-date-picker__icon {
  font-size: 20px; // Размер кастомной иконки
}
</style>

4. В CSS вы сможете настроить стили и размер вашей кастомной иконки, используя класс .el-date-picker__icon.

Теперь, после выполнения этих шагов, вы сможете изменить иконку календаря по умолчанию на кастомную иконку для элемента Date Picker от Element Plus в вашем проекте.