如何调整vue-bootstrap-datetimepicker宽度并插入图标？

针对你遇到的两个问题，我整理了实用的解决方法，亲测可行：

一、添加日历图标到日期选择器 #

由于date-picker组件本身没有直接支持插入自定义图标的插槽，推荐用**Bootstrap输入组（Input Group）**的方式实现，既能完美适配Bootstrap风格，又能保证图标功能正常：

实现代码 #

<template>
  <div>
    <!-- 把两个选择器放在同一个form-row里，为并排显示做准备 -->
    <div class="form-row">
      <!-- 第一个日期选择器：用col-md-6分配宽度 -->
      <div class="col-md-6 mb-3">
        <div class="input-group">
          <date-picker 
            name="begin-date" 
            @dp-change="changeDate()" 
            v-model="model.beginDate" 
            :config="datePickerConfig" 
            ref="beginDate"
            class="w-100"
          ></date-picker>
          <!-- 添加日历图标 -->
          <div class="input-group-append">
            <span class="input-group-text bg-white border-left-0">
              <font-awesome-icon icon="calendar"></font-awesome-icon>
              <!-- 也可以用原生Font Awesome标签：<i class="fas fa-calendar"></i> -->
            </span>
          </div>
        </div>
      </div>

      <!-- 第二个日期选择器 -->
      <div class="col-md-6 mb-3">
        <div class="input-group">
          <date-picker 
            name="end-date" 
            @dp-change="changeDate()" 
            v-model="model.endDate" 
            :config="datePickerConfig" 
            ref="endDate"
            class="w-100"
          ></date-picker>
          <div class="input-group-append">
            <span class="input-group-text bg-white border-left-0">
              <font-awesome-icon icon="calendar"></font-awesome-icon>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

说明 #

• 用input-group包裹date-picker，通过input-group-append把图标放在输入框右侧，点击图标会自动触发日期选择器弹出（输入组的点击事件会传递到输入框）。
• 给date-picker添加class="w-100"，让它占满父容器宽度，适配网格布局。

二、让两个日期选择器并排显示 #

你之前的代码把每个选择器放在单独的form-row里，所以会自动换行。只需要做两个调整：

1. 把两个date-picker放在**同一个form-row**中。
2. 用Bootstrap的网格列类分配宽度：
   • col-md-6：在中等屏幕（≥768px）及以上，每个选择器占父容器的50%宽度，小屏幕自动换行，符合响应式设计。
   • 若想在所有屏幕强制并排，换成col-6即可。

可选：用Flexbox实现并排 #

如果不想依赖Bootstrap网格，也可以用Flexbox布局：

<template>
  <div class="d-flex gap-3 p-3">
    <div class="flex-grow-1">
      <!-- 第一个带图标的date-picker -->
    </div>
    <div class="flex-grow-1">
      <!-- 第二个带图标的date-picker -->
    </div>
  </div>
</template>

• d-flex让父容器变成Flex布局，gap-3设置两个选择器的间距，flex-grow-1让它们平分可用宽度。

额外补充：替换日历弹窗内的图标 #

如果你还想修改日期选择器弹窗里的默认图标，可以在datePickerConfig里配置icons选项：

data() {
  return {
    datePickerConfig: {
      icons: {
        time: 'fas fa-clock',
        date: 'fas fa-calendar',
        up: 'fas fa-arrow-up',
        down: 'fas fa-arrow-down',
        previous: 'fas fa-chevron-left',
        next: 'fas fa-chevron-right',
        today: 'fas fa-calendar-check-o',
        clear: 'fas fa-trash',
        close: 'fas fa-times'
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者user11480180