Dropdown widget doesn't have any control

[symonsoft]

I'm submitting a bug report

My platform

• Ubuntu 16.04
• pc-bootstrap4-datetimepicker : 4.17.50
• Vue.js version : 2.5.2
• Browser name and version : Opera 54.0.2952.64
• This package version : 4.1.4

package.json dependencies section:

    "dependencies": {
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "pc-bootstrap4-datetimepicker": "4.17.50",
        "vue-fa": "^1.1.2",
        "bootstrap-vue": "^2.0.0-rc.11",
        "jquery": "^1.11.0",
        "moment": "^2.18",
        "vue-bootstrap-datetimepicker": "4.1.4"
    }

Current behavior Running Usage example Dropdown doesn't have any control:

[ankurk91]

In order to use bootstrap v4. You need to install v5 beta version. This is in readme. https://github.com/ankurk91/vue-bootstrap-datetimepicker#installation

I see you are using v4

[symonsoft]

Let me try your advice. BTW look at https://www.npmjs.com/package/vue-bootstrap-datetimepicker#installation

[symonsoft]

Which bootstrap version should I use with vue-bootstrap-datetimepicker==4.1.4? And how?

[symonsoft]

Simple switching to 5-beta version doesn't work:

My packages.json dependencies section:

    "dependencies": {
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "pc-bootstrap4-datetimepicker": "4.17.50",
        "vue-fa": "^1.1.2",
        "bootstrap-vue": "^2.0.0-rc.11",
        "jquery": "^1.11.0",
        "moment": "^2.18",
        "vue-bootstrap-datetimepicker": "5.0.0-beta.2"
    }

Now error during compilation:

    ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue
    Module not found: Error: Can't resolve 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css' in '/vue_test/src/components'
     @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue 19:0-82
     @ ./src/components/HelloWorld.vue
     @ ./src/router/index.js
     @ ./src/main.js

      Build failed with errors.

[KnowBe4-Delbert]

I am experiencing the same issue using bootstrap 3 and the latest version of 4.x. I'll try reverting to an earlier version.

Edit: It appears that it's only the day selectors that are not showing - the time selectors show correctly.

[KnowBe4-Delbert]

My issue was apparently some conflicting css hiding the divs. Nothing to see here for my part. :)

[symonsoft]

@ankurk91 Why closed? Not solved. Please answer my questions Which dependencies should I provide in package.json and how link them to sources? Because Usage example definetelly misses something.

Which bootstrap version should I use with vue-bootstrap-datetimepicker==4.1.4? And how?

[ankurk91]

Closed because you are not reading readme.md on GitHub. Everything is mentioned there

[symonsoft]

@ankurk91 Ok. but can you give the working example in form of compilable vuejs-project, not in jsfddle?

[ankurk91]

https://codesandbox.io/s/pwxplp209x

[symonsoft]

@ankurk91 Thanks! It works! But there is no button icons:

[ankurk91]

The icons were working for me. By default it assumes that you have loaded font awesome v4.7 But you can override them as instructed in readme.

[symonsoft]

Is it enough to include fontawesome icons package to packages.json?

[ankurk91]

You need to import them so that they can be served with your app css

[symonsoft]

Doesn't work:

packages.json

App.vue

Result the same:

[ankurk91]

Dude, I said you need to pull font awesome v4.7.

Or if you pull in v5.x then you need to configure icons manually by passing them in the configs. The read me has example code to override font icon css class configs

[symonsoft]

Solved only with:

[ankurk91]

Can you just clone this repo and play with examples.

Clone the repo

yarn install
yarn start

[ankurk91]

It's been more than 24 hours and I could not make a developer to install and run my package. Shame on me. :(

[symonsoft]

It seems that fontawesome v5.2.0 fonts aren't available from browser. CSS requires that fonts are placed in ../webfonts path relative to page. This folder exists after package installation but in /node_modules/ which is not accessible from browser. And after Vuejs project compilation there is no such a folder in /dist. MB I need to import it properly? @ankurk91 Could you give me advice how to make fonts placed in /dist/webfonts after compilation?

[ankurk91]

Dont you think you are too leazy to Google things? Do you really think that font issue is related to this package?

It is webpack configuration issue. I told you to clone this repo. Repo has everything and you could have seen the webpack config in repo.

[symonsoft]

Don't you think I google before I ask? =) Seriously, I tried to google this issue with webpack. Nothing relevant.

BTW I'm very new in frontend development.

[ankurk91]

Okay, How are you developing? Vue cli? Laravel mix? Custom webpack?

All of them uses webpack. I am sure you are also using webpack devserver.

[ankurk91]

You can see there is a loader configured to handle font files

https://github.com/ankurk91/vue-bootstrap-datetimepicker/blob/fe6ee359c7bfd8a3ccca5150cb9fcafc907eeafb/webpack.config.dev.js#L63

Google on how to configure the loader and which loader is responsible to auto copy the font files from node modules to dist folder. Webpack has different loaders to handle types of files. I am sure that your webpack is already doing that.

[symonsoft]

How are you developing?

I'm using npm to install packages:

  $ npm install

And then build project with:

$ npm run build

After build completed Nginx serve /dist folder as root.

[ankurk91]

Dude, I can help you like this. You are not helping me. Go and learn the basics first. GitHub is not best place to get help on this. Please use some public forum like - stack overflow. Thanks for understanding.