Использование bootstrap-daterangepicker в компоненте vue - PullRequest
Новая
       11

Использование bootstrap-daterangepicker в компоненте vue

0 голосов
/ 14 марта 2019

У меня проблемы с тем, чтобы bootstrap-daterangepicker работал в моем компоненте vue.

Я установил пакет через npm:

npm i bootstrap-daterangepicker

Я побежал npm run dev

Я подтвердил, что пакет включен в мой файл app.js после переноса.

Это мой компонент Vue: 

<template>
    <div class="input-group mb-3">
        <input type="text" class="form-control shawCalRanges">
        <div class="input-group-append">
            <span class="input-group-text">
                <span class="ti-calendar"></span>
            </span>
        </div>
    </div>
</template>

<script>
  import moment from 'moment';
  console.log(moment().format('HH:mm'));
  import daterangepicker from 'bootstrap-daterangepicker';

  $('.shawCalRanges').daterangepicker({
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        alwaysShowCalendars: true,
    });


export default {
  name: 'date-range-picker',
  data() {
    return {
    }
  },
}

</script>

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

Вопросы:

  1. Как мне заставить bootstrap-daterangepicker работать в моем компоненте vue?
  2. Я предполагаю, что это неправильный способ структурировать компонент vue. Как бы вы справились с этим? То есть загрузка файла Vue с помощью DatePicker. Уместно ли просто вставить его в тег скрипта? Я новичок в Vue и имею опыт работы с jquery, так что это немного чуждо мне.
...