How to style vue-bootstrap-datetimepicker by changing the width and inserting icons in it?

Question

I have two date pickers objects from the package vue-bootstrap-datetimepicker. They work perfectly in terms of functionality but I would like to make some changes to their appearence. I have the following code that is relevant:

<template>
    <div>
        <div class="form-row">
            <date-picker
                    name="begin-date"
                    @dp-change="changeDate()"
                    v-model="model.beginDate"
                    :config="datePickerConfig"
                    ref="beginDate">
            </date-picker>
        </div>

        <div class="form-row">
            <date-picker
                    name="end-date"
                    @dp-change="changeDate()"
                    v-model="model.endDate"
                    :config="datePickerConfig"
                    ref="endDate">
            </date-picker>
        </div>
    </div>
</template>

I would like to insert a calender icon for instance, I usually do that inside bootstrap components like so:

        <b-button
                id="Somebutton"
                :title="example for stack overflow"
                size="sm"
                :class="{danger: hasError}"
                :disabled="loading">
            <font-awesome-icon icon="columns"></font-awesome-icon>
        </b-button>

But putting <font-awesome-icon icon="columns"></font-awesome-icon> doesn't work in the code i want to change. Neither does the HTML work ( e.g. <i class="fas fa-columns"></i>). So I was wondering how to put the icons in there. Another question was how to change their width, at this moment they look like this:

I would like to change their width so that they fit next to each other on the same line but couldn't find anything in the package documentation that could help me do this.

Answer 1

TL;DR: Here's the fiddle: https://jsfiddle.net/62a3Lu9y/6/

To add a button to a form field, you can use the button addons to form fields.

<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">Button</button>
  </div>  
  <date-picker ... />
</div>

However, this only gives you the ability display your button within the field addon. For it to actively toggle the picker, you need to bind the button event to the date picker contained in the vue-bootstrap-datetimepicker component:

• Give the date picker a ref: <date-picker ref="dp" .../>
• Register for @click events on the button and access the ref there: <button ... @click="$refs.dp...">
• Access the inner date picker to be able to call functions on it: @click="$refs.dp.dp.show()" (this is kinda hacky, as it breaks the encapsulation of the vue date picker component, though)

Regarding the layouting question, you should be able to do so by simply using a grid layout for your form, see https://getbootstrap.com/docs/4.1/components/forms/#form-grid.

Something along these lines

<div class="row">
  <div class="col">
    <date-picker ... />
  </div>
  <div class="col">
    <date-picker ... />
  </div>
</div>