vue-flatpickr-component имеет странный стиль

Question

В настоящее время я пытаюсь воспроизвести пример "обтекания", показанный здесь: https://ankurk91.github.io/vue-flatpickr-component/ но даже при копировании и вставке необходимого мне фрагмента кода (без стилизации кнопок) Я получаю странный / укороченный компонент выбора

<div class="form-group">
          <label>Select date (wrap)</label>
          <div class="input-group">
            <flat-pickr v-model="form.date"
                        placeholder="Select date"
                        :config="configs.wrap"
                        :required="true"
                        @on-change="listenToOnChangeEvent"
                        class="form-control"
                        name="date-name"
                        :disabled="inputDisabled"
                        ref="datePickerWrap">
            </flat-pickr>
            <div class="input-group-append">
              <button type="button" title="Toggle" data-toggle>
                Toggle
              </button>
              <button type="button" title="Clear" data-clear>
                Clear
              </button>
            </div>
          </div>
        </div>

первая представляет собой средство выбора даты и времени с добавленными кнопками (выглядит странно и ничего не вставлено в строку), ко второй не прикреплено ничего особенного

мой код выглядит так:

      <div class="form-group">
        <label>Select date (wrap)</label>
        <div class="input-group">
          <flat-pickr ref="datePickerWrap"
                      v-model="registeredAtFrom"
                      :config="configs"
                      :required="true"
                      :disabled="inputDisabled"
                      placeholder="Select date"
                      class="form-control search"
                      name="date-name">
          </flat-pickr>
          <div class="input-group-append">
            <button class="btn btn-success" type="button" title="Toggle" data-toggle>
              Toggle
            </button>
            <button class="btn btn-danger" type="button" title="Clear" data-clear>
              Clear
            </button>
          </div>
        </div>
      </div>
      <v-spacer></v-spacer>
      <flat-pickr
        v-model="registeredAtTo"
        :config="configs"
        :placeholder="$t('message.searchFields.registeredAtTo')"
        class="form-control search"
        name="date"
      ></flat-pickr>

конфиги vue-flatpickr-component:

configs: {
        wrap: true,
        enableTime: true,
        dateFormat: 'Y-m-d H:i:S',
        maxDate: new Date(),
        minuteIncrement: 1,
        locale: Hungarian,
        time_24hr: true
      }

соответствующие элементы package.json:

"vue": "^2.5.2"    
"vue-flatpickr-component": "^8.1.1"    
"vuetify": "^1.2.3"

любая помощь будет оценена, спасибо!

Answer 1

Вы уверены, что загрузили.css? Он должен быть импортирован самостоятельно, сразу после импорта пакета:

<script>
  import flatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';

  ...
</script>