Vue-Bootstrap-Datetimepicker：为时间选择器字段添加自定义后缀

需求 #

给vue-bootstrap-datetimepicker的时间选择器添加固定后缀（比如时区标识），实现选中时间后输入框显示类似「14:30 UTC」的效果。

当前使用代码 #

<date-picker v-model="time" class="portal-time-picker" placeholder="Pickup Time" 
  :leg.timeEntered="false" @input="timeEntered = true" 
  :config="{format: 'LT',widgetPositioning: {horizontal:'auto',vertical:'top'}}" required @dp-change="setUTCDate">
</date-picker>

已尝试方案及问题 #

• 方案1：默认插槽自定义输入框拼接时区
  代码：

  <template v-slot:default="{ value }">
    <input type="text" 
      :value="value + ' ' + Intl.DateTimeFormat().resolvedOptions().timeZone"
      placeholder="Pickup Time (timezone)" readonly>    
  </template> 
  

  问题：设置为只读输入框后，可能无法触发时间选择器的弹窗交互；同时后缀会直接混入绑定值，导致提交数据时携带无效的后缀内容。

• 方案2：尝试b-form-datepicker的append属性
  代码：

  <template>
    <div>
      <b-form-datepicker v-model="date" :append="suffix"></b-form-datepicker>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        date: null,
        suffix: ' (UTC)'
      }
    }
  }
  </script>
  

  问题：append是Bootstrap-Vue原生b-form-datepicker的专属属性，和当前使用的vue-bootstrap-datetimepicker（基于eonasdan-bootstrap-datetimepicker）不兼容，无法生效。

可行实现方法 #

方法1：利用input插槽定制带后缀的输入框（保留交互） #

vue-bootstrap-datetimepicker提供input插槽，可自定义输入框结构且不破坏选择器的交互逻辑。借助Bootstrap的input-group组件，将输入框和后缀文本分离，避免后缀影响绑定值：

<date-picker v-model="time" class="portal-time-picker" placeholder="Pickup Time" 
  :leg.timeEntered="false" @input="timeEntered = true" 
  :config="{format: 'LT',widgetPositioning: {horizontal:'auto',vertical:'top'}}" required @dp-change="setUTCDate">
  <template v-slot:input="{ value, field }">
    <div class="input-group">
      <input 
        v-bind="field" 
        :value="value" 
        class="form-control"
        placeholder="Pickup Time">
      <span class="input-group-text">{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}</span>
    </div>
  </template>
</date-picker>

优势：

• 绑定组件内部field属性，确保输入框可正常触发时间选择器弹窗；
• 后缀独立为input-group-text元素，不会混入v-model绑定的time值，不影响数据提交。

方法2：自定义格式化函数修改显示文本（不影响原始值） #

如果希望后缀直接显示在输入框文本内，但不污染绑定的原始时间值，可使用组件配置中的formatDisplay函数：

<template>
  <date-picker 
    v-model="time" 
    class="portal-time-picker" 
    placeholder="Pickup Time" 
    :leg.timeEntered="false" 
    @input="timeEntered = true" 
    :config="pickerConfig" 
    required 
    @dp-change="setUTCDate">
  </date-picker>
</template>

<script>
export default {
  data() {
    return {
      time: null,
      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      pickerConfig: {
        format: 'LT',
        widgetPositioning: { horizontal: 'auto', vertical: 'top' },
        // 自定义显示格式逻辑
        formatDisplay(date, format) {
          // 按默认格式生成时间文本
          const formattedTime = moment(date).format(format);
          // 拼接时区后缀
          return `${formattedTime} ${this.timeZone}`;
        }
      }
    };
  },
  methods: {
    setUTCDate() {
      // 原有业务逻辑保持不变
    }
  }
};
</script>

注意：该组件依赖moment.js，需确保项目已引入。此方法仅修改显示文本，v-model绑定的time仍为纯时间对象/字符串，不影响后续数据处理。

方法3：CSS伪元素添加纯视觉后缀（最简单） #

若后缀仅用于视觉展示，无需参与数据操作，直接用CSS伪元素实现即可：

<date-picker v-model="time" class="portal-time-picker with-timezone-suffix" placeholder="Pickup Time" 
  :leg.timeEntered="false" @input="timeEntered = true" 
  :config="{format: 'LT',widgetPositioning: {horizontal:'auto',vertical:'top'}}" required @dp-change="setUTCDate">
</date-picker>

<style scoped>
.with-timezone-suffix .form-control {
  position: relative;
  padding-right: 60px; /* 根据后缀长度调整预留空间 */
}

.with-timezone-suffix .form-control::after {
  content: 'UTC'; /* 替换为目标后缀文本 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d; /* 用浅灰色区分输入文本 */
  pointer-events: none; /* 避免干扰输入框交互 */
}
</style>

优势：无需修改组件逻辑，纯样式实现，完全不影响数据处理流程。

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