DateRangepicker not showing

[simocheccoli]

• Vue.js version: 2.6.11
• consumed using: (webpack)
• FULL error message (including stack trace): 0 errors
• relevant code:

App.vue

  import $ from "jquery";
  window.$ = $;

MyComponent.vue

<v-server-table :columns="columns" :options="options" :theme="theme" id="dataTable"></v-server-table>

  import moment from "moment";
  import daterangepicker from "daterangepicker";

  window.moment = moment;
  window.daterangepicker = daterangepicker;

  Vue.use(ServerTable);

  export default {
    name: "Actions",
    props: [
      'perPage'
    ],
    components: {
      ServerTable,
      Event,
      Loading
    },
    data() {
      return {
        isLoading: false,
        columns: ['applicationUuid', 'name', 'command', 'status', 'user', 'initAt', 'endAt'],
        options: {
          sortable: ['applicationUuid', 'name', 'command', 'status', 'user', 'initAt', 'endAt'],
          sortIcon: {base: 'fa', up: 'fa-sort-asc', down: 'fa-sort-desc', is: 'fa-sort'},
          filterByColumn: true,
          filterable: ['name', 'command', 'status', 'user', 'initAt', 'endAt'],
          dateColumns: ['initAt'],
          headings: {
            name: this.$t('message.name'),
            command: this.$t('message.command'),
            status: this.$t('message.status'),
            userDisplayName: this.$t('message.name'),
            initAt: this.$t('message.started'),
            endAt: this.$t('message.ended'),
          },
          perPageValues:  [this.perPage, 10, 25, 50, 100],
          perPage: this.perPage,
          pagination: {
            chunk: 5,
            edge: true,
            nav: 'scroll'
          },
          requestFunction: (data) => {
           //Call via axios
          }
        },
        useVuex: false,
        theme: 'bootstrap4',
        template: 'default'
      }
    },
    mounted() {
    }
  }

• steps for reproducing the issue: No filter is showing for initAt : just a placeholder label is showing.

[NoamGit]

I have somewhat the same problem. No filter, only placeholder... The strange thing is - Sometimes it works (opening the daterangepicker UI) and the other times it doesn't.

In order to ensure the scripts tags are set I use

created() {
            let jqueryScript = document.createElement('script');
            jqueryScript.setAttribute('type', "text/javascript");
            jqueryScript.setAttribute('src', "//cdn.jsdelivr.net/jquery/latest/jquery.min.js");
            document.head.appendChild(jqueryScript);
            let momentScript = document.createElement('script');
            momentScript.setAttribute('type', "text/javascript");
            momentScript.setAttribute('src', "//cdn.jsdelivr.net/momentjs/latest/moment.min.js");
            document.head.appendChild(momentScript);
            let dateRangeScript = document.createElement('script');
            dateRangeScript.setAttribute('type', "text/javascript");
            dateRangeScript.setAttribute('src', "//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js");
            document.head.appendChild(dateRangeScript);
        },

I found out that if I am using the filterable field, or change the daterangepickerOptions it also creates incosistancies.

I believe that the problem is with the daterangepicker and not with vue-tables-2 However, can you please share the best practice of how to ensure that the datepicker is loaded in a Vue component page?

here is the error from the console

Uncaught TypeError: Cannot read property 'fn' of undefined
    at cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js:7
    at cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js:7
    at cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js:7