vue-flatpickr-component имеет странный стиль - PullRequest
Новая
       11

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

0 голосов
/ 12 февраля 2019

В настоящее время я пытаюсь воспроизвести пример «обтекания», показанный здесь: 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"

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

1 Ответ

0 голосов
/ 13 февраля 2019

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

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

  ...
</script>
...