如何通过更改宽度并在其中插入图标来设置 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>

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

给日期选择器一个 ref: <date-picker ref="dp" .../>
在按钮上注册 @click 事件并访问那里的 ref：<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>

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

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

javascript

datepicker

bootstrap-datepicker

vue.js

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

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

javascript

datepicker

bootstrap-datepicker

vue.js

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