TypeError: this.elem.datetimepicker is not a function

[OctaneInteractive]

I'm submitting a ... (check one with "x")

[ ] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[x] Other, please describe

Tell about your platform

• eonasdan-bootstrap-datetimepicker version : 4.17.47
• Vue.js version : 2.5.9
• Browser name and version : Chrome 60.0.3112.101
• This package version : latest

Current behavior

At the moment, we have single text field, and I'm attempting to turn it into a date picker element.

I followed the installation instructions, added the code to the webpack.mix.js file, created a webpack.config.dev.js file using the the source from the file of the same name, and in the component in Vue:

var moment = require('moment'); moment().format();

// Import this component
import datePicker from 'vue-bootstrap-datetimepicker';

// Import required dependencies
import 'bootstrap/dist/css/bootstrap.css';

// Import date picker css
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';

Vue.use(datePicker);

However, I'm getting a warning:

[Vue warn]: Error in mounted hook: "TypeError: this.elem.datetimepicker is not a function"

found in

--->

at resources/assets/js/components/SpreadsheetsManageEdit.vue

... and an error:

TypeError: this.elem.datetimepicker is not a function at VueComponent.mounted (appSpreadsheetManageEdit.js:30645) at callHook (app.js:14138) at Object.insert (app.js:15319) at invokeInsertHook (app.js:17080) at VueComponent.patch [as patch] (app.js:17299) at VueComponent.Vue._update (app.js:13890) at VueComponent.updateComponent (app.js:14008) at Watcher.get (app.js:14358) at Watcher.run (app.js:14435) at flushSchedulerQueue (app.js:14197) at Array. (app.js:13059) at flushCallbacks (app.js:12980) at

Expected behavior I would expect there to be a date picker to use.

Minimal reproduction of the problem with instructions Since this is an entire application, it's not feasible to create a minimal working version; it would take at least a day to do.

However, I would be willing to grant the author access to the repo on Git, if need be.

[ankurk91]

What does webpack.config.dev.js do with Laravel Mix ?

[OctaneInteractive]

I don't understand the question.

In the webpack.mix.js file, I have:

mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue','window.Vue'],
    'moment': ['moment','window.moment']
})...

... with additional parameters that were there before I attempted installing the date picker code.

[ankurk91]

My question was straight forward. There is no need to create webpack.config.dev.js when you are using laravel mix.

Why you have specified this in your question.

[OctaneInteractive]

In the instructions, you ask if I'm using Laravel Mix, which I am, so I used that code.

Also, I get the same errors whether I use the code in the Webpack file or use the webpack.config.dev.js file or not.

[ankurk91]

If you know webpack then you can clone this repo and see how my examples are working.

[OctaneInteractive]

I'm not familiar with the inner workings of Laravel or Webpack, so this has been a process of trial and error.

I've removed the webpack.config.dev.js file, moved the import code into the app.js file, and removed the links to jQuery from within the blade file, which got something working, although the pop-up isn't getting populated with the actual date picker itself.

[ankurk91]

Glad you was made it. Try loading the component without bootstrap modal.

Make sure it is working fine outside of modal. Try to isolate the issue by removing any 3rd party css code.

I am sure some css code is causing the datepicker not to show property. I never faced any issues using this component inside popups or modal.

[OctaneInteractive]

I tried it outside the modal and it's still not working.

I'm using the format: "YYYY-MM-DD" and wondering if that's something to do with it?

[ankurk91]

Do you see any errors in console?

[OctaneInteractive]

No errors.

[OctaneInteractive]

I found a reference to Bootstrap for X-Editable which was interfering with your own reference.

I've removed that and the date picker is working.

Thanks for the assistance!