tempus-dominus: datetimepicker() is not a function

I am using the npm install method to use this package with an app I am building and no matter where I seem to put it, I receive the dreaded undefined error in my console:

Uncaught TypeError: $(...).datetimepicker is not a function

Here is my simplified JavaScript file:

window.$ = window.jQuery = require("jquery");
require('eonasdan-bootstrap-datetimepicker');

$( document ).ready(function() {
    $('.datepicker').datetimepicker();
});

Am I missing something fundamental here? This seems like the simplest possible use case.

Thanks!

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 10
Comments: 23

Commits related to this issue

jquery moment and bootstrap are peerDependencies Fixes #1662 — committed to Guymestef/bootstrap-datetimepicker by Guymestef 8 years ago
datetimepicker() is not a function => jquery, moment, bootstrap are peerDependencies. Fixes #1662 Fixes #1662 — committed to Guymestef/bootstrap-datetimepicker by Guymestef 8 years ago
Fixes #1662 Fixes #1662 : peerDependencies is deprecated in npm 3 — committed to Guymestef/bootstrap-datetimepicker by Guymestef 7 years ago

Most upvoted comments

This worked for me using Webpack without additional configuration:

global.$ = global.jQuery = require('jquery');
$.fn.datetimepicker = require('eonasdan-bootstrap-datetimepicker');

Not really pretty solution but at least you don’t have to waste time on configuration.

+19

IvanBernatovic on Oct 18, 2016

We definitely needs this to be fixed and merged. I also solved the problem by fixing the jquery version in my Webpack config, but it is just a workaround for this design issue.

unsafecode on Nov 15, 2016

@stefanfrede thank you very much! it worked for me! In my case it is working even with

 resolve: {
    alias: {
            jquery: Path.join(__dirname, 'node_modules/jquery/dist/jquery')
    },
  },

danielesalvatore on Aug 31, 2016

I’m having this issue as well using browserify (Laravel Elixir). @owenwe’s solution did not work for me either. 😦

mikebronner on Jul 9, 2016

I ran into this problem as well, although I used bootstrap-datetimepicker-npm, I think it’s a clone of the same source.

Anyway, I was using webpack to bundle everything and in a dependencies.js file. I was doing a require("bootstrap-datetimepicker-npm"), thinking the css and javascript would be brought in and all I had to do was $("#someInputElement").datetimepicker(). But there would always be a ... datetimepicker is not a function error.

What worked for me was bringing in the .js and .css files individually. So in my dependencies.js file I have require("bootstrap-datetimepicker-npm/build/js/bootstrap-datetimepicker.min.js") and in my .less file I have @import '~bootstrap-datetimepicker-npm/build/css/bootstrap-datetimepicker.min.css';

Hope that helps.

owenwe on Jun 25, 2016