Как стилизовать vue-bootstrap-datetimepicker, изменив ширину и вставив в него значки? - PullRequest
Новая
       50

Как стилизовать vue-bootstrap-datetimepicker, изменив ширину и вставив в него значки?

3 голосов
/ 09 октября 2019

У меня есть два объекта выбора даты из пакета 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>

Я хотел бы, например, вставить значок календаря, я обычно делаю это внутри компонентов начальной загрузки, например: 

        <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>). Так что мне было интересно, как поместить туда иконки. Другой вопрос состоял в том, как изменить их ширину, в этот момент они выглядят так:

enter image description here

enter image description here

Я бы хотел изменить их ширину так, чтобы они помещались рядом друг с другом на одной линии, но не нашел в документации пакета ничего, что могло бы помочь мне сделать это.

1 Ответ

1 голос
/ 09 октября 2019

TL; DR: вот скрипка: https://jsfiddle.net/62a3Lu9y/6/

Чтобы добавить кнопку в поле формы, вы можете использовать кнопку расширения для полей формы . 

<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 событий на кнопке и получите доступ к ссылке там: <button ... @click="$refs.dp...">
  • Доступ к внутреннему средству выбора даты, чтобы иметь возможность вызывать функции на нем: @click="$refs.dp.dp.show()" (хотя это несколько странно, так как это нарушает инкапсуляцию компонента выбора даты 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>
...