damienroche / vue-mj-daterangepicker

🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)
https://damienroche.github.io/vue-mj-daterangepicker/
60 stars 39 forks source link

The date-range-picker does not even show-up. #2

Open aravind9349 opened 5 years ago

aravind9349 commented 5 years ago

First of all thanks to the wonderful plugin. The design looks very neat and superb.

The picker does not even show up in the component I have used. I have used the same code as described in the example. There are no errors in the console though.

<date-range-picker begin="2016-02-19T00:00:00.000+01:00" :from="from" :to="to" :panel="panel" :theme="theme"/>

<script>

export default {
  name: "SampleComponent",
  data: () => ({
    to: '2019-04-23T10:26:00.996Z',
    from: '2018-04-23T10:26:00.996Z',
    panel: 'range',
    theme: {
      primary: '#46C3A3',
      secondary: '#2D3E50',
      ternary: '#93A0BD',
      light: '#ffffff',
      border: '#e6e6e6',
      dark: '#000000',
      hovers: {
        day: '#CCC',
        range: '#e6e6e6'
      }
    }
  }),
  methods: {
    update(values) {
      this.$router.push({
        query: Object.assign({}, this.$route.query, {
          to: values.to,
          from: values.from,
          panel: values.panel
        })
      });
    }
  }
};

</script>

The initialisation is done in the application.js

import Vue from "vue";
import DateRangePicker from 'vue-mj-daterangepicker'
import 'vue-mj-daterangepicker/dist/vue-mj-daterangepicker.css'

Vue.use(DateRangePicker)
damienroche commented 5 years ago

Hi @aravind9349 thanks for the feedback. I just created a sandbox with your code and everything looks fine. Can you inspect your DOM and tell me if the date picker markup is present. Thanks

aravind9349 commented 5 years ago

@damienroche Thanks for the reply. Yeah, I had already checked the DOM, the datepicker markup is not present in the DOM. Any idea what could be the issue?

Warox23 commented 5 years ago

Same issue.

Created empty vue project - everything works. but can't use this datepicker in main project.

Dom doesn't contain plagin. No errors in console.

thabrlawrenz commented 5 years ago

I have the same problem. No errors in console, just cant get it to show in my main app.

Warox23 commented 5 years ago

I have the same problem. No errors in console, just can't get it to show in my main app.

I fixed a similar issue with another daterangepicker. Make sure that in node modudels this plagin doesn't have own node_modules with own jquery.

My issue was that the plagin downloaded own nodemodules dependencies under its folder.

thabrlawrenz commented 5 years ago

I had a look under the node_modules in the plugin I do not see a jquery file. Are you sure its the jquery file in the plugin's node_modules thats causing the issue. How did you prevent/remove the files in the node_modules to prevent this behaviour ?

damienroche commented 5 years ago

@thabrlawrenz if you can push your project somewhere, I can take a look

Bizhev commented 4 years ago

Same issue.

Created empty vue project - everything works. but can't use this datepicker in main project.

Dom doesn't contain plagin. No errors in console.

@Warox23 Check the connection and use of the component, most likely this is the reason