javascript - 如何通过更改宽度并在其中插入图标​​来设置 vue-bootstrap-datetimepicker 的样式？

Question

我有两个来自包 vue-bootstrap-datetimepicker 的日期选择器对象.它们在功能方面非常完美，但我想对它们的外观进行一些更改。我有以下相关代码:

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

例如，我想插入一个日历图标，我通常在 bootstrap 组件中这样做:

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

但是把<font-awesome-icon icon="columns"></font-awesome-icon>在我想更改的代码中不起作用。 HTML 也不起作用(例如 <i class="fas fa-columns"></i>)。所以我想知道如何将图标放在那里。另一个问题是如何改变它们的宽度，此时它们看起来像这样:

我想更改它们的宽度，以便它们在同一行上彼此相邻，但在包文档中找不到任何可以帮助我执行此操作的内容。

Answer 1

TL;DR:这是 fiddle :https://jsfiddle.net/62a3Lu9y/6/

要将按钮添加到表单域，您可以使用 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>

但是，这只允许您在字段插件中显示您的按钮。为了让它主动切换选择器，您需要将按钮事件绑定(bind)到 vue-bootstrap-datetimepicker 中包含的日期选择器。组件:

• 给日期选择器一个 ref : <date-picker ref="dp" .../>
• 注册@click按钮上的事件并访问那里的引用:<button ... @click="$refs.dp...">
• 访问内部日期选择器以便能够调用 functions在上面:@click="$refs.dp.dp.show()" (这有点 hacky，因为它破坏了 vue 日期选择器组件的封装，不过)

关于布局问题，您应该能够通过简单地为您的表单使用网格布局来做到这一点，请参阅 https://getbootstrap.com/docs/4.1/components/forms/#form-grid .

类似的东西

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