vue-bootstrap-datetimepicker - append datetimepicker field with custom text

Question

I want to customize the date time picker field. I am trying to append or add a suffix to the time.

My Code:

<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>

Visual Representation of What I want:

Things I have tried:

1.

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

<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>

Answer 1

For now I have done something temporary.

Changes:

Visually:

but I still want timezone inside the field, Need help with that.