Tempus-dominus: datetimepicker() is not a function

[webkenny]

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!

[sanbeaman]

have you found a solution to this issue? I'm getting the same problem.
I'm thinking of skipping bootstrap / jquery and going all vue.js...

[webkenny]

Nope. It's driving me bananas but I have to agree. I am actually going to switch to Vue myself but I'll probably maintain jQuery and Bootstrap, just smaller versions of them.

[sanbeaman]

Ok. at least I'm not the only one.. I didn't think that adding a calendar with datetime would be this buggy. wish I had time to create and maintain a stable picker..

[owenwe]

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.

[mikebronner]

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

[emakarov]

same problem

[drunkhacker]

i think this issue is related with https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1483

I fixed it with main jquery's version of 2.1.x . The reason is that this library requires jquery to be < 2.2.0

[stefanfrede]

I had to add the solution from this closed pull request to get it working.

[danielesalvatore]

HI @stefanfrede can you provide your solution?
i cannot make it work with [email protected] and

     new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),

[stefanfrede]

@danielefenix: I'm not 100% sure right now but I have in mind in the end this did the trick:

  resolve: {
    alias: {
      jquery: path.join(PATHS.node, 'jquery/dist/jquery'),
    },
  },

[danielesalvatore]

@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')
    },
  },

[giraz82]

I have the same bug.
Where have I to put these lines?
resolve: { alias: { jquery: Path.join(__dirname, 'node_modules/jquery/dist/jquery') }, },
I'm using Browserify with Laravel Elixir.
Thanx

[stefanfrede]

@giraz82 This is part of webpack config, so you will not get that far with Browserify.

[giraz82]

@stefanfrede Yes, I see. I had to manual include bootstrap-datetimepicker to have it to work properly.
I forced Browserify to use jQuery 2.1.4 but the isse remains.

[IvanBernatovic]

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.

[EstherAF]

@IvanBernatovic that makes the trick so you can use it from a jquery object, but inside that function, I think it may not be using _your_ jquery, but _its_ jquery dependency instead, which is at your node_modules/eonasdan-bootstrap-datetimepicker/node_modules.jquery

The solution is in the pull request #1687 but the guy did it to the master, so it's not going to be merged, I think

Another related issue: #1533

[unsafecode]

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.

[macolo]

guys, I am not sure what you are talking about, this is working perfectly out of the box for me.

main.js:

// this will let us have a global jQuery object
window.$ = window.jQuery = require("jquery");

// Modernizr global :)
window.Modernizr = require('modernizr');

// this loads bootstrap-sass
require("bootstrap-loader");

// needed for datepicker
window.moment = require('moment');

// bootstrap-select component (http://silviomoreto.github.io/bootstrap-select/)
require("bootstrap-select");

// bootstrap datepicker component
require("eonasdan-bootstrap-datetimepicker");

webpack.config.js

'use strict';

const path = require("path");
const extract_text_plugin = require("extract-text-webpack-plugin");
const validate = require('webpack-validator');
var bundle_tracker = require('webpack-bundle-tracker');
const webpack = require('webpack');

// http://jamesknelson.com/webpack-made-simple-build-es6-less-with-autorefresh-in-26-lines/

const production_settings = {
    context: __dirname,
    debug: true,
    // JS
    devtool: 'source-map',
    // devtool: 'eval',
    entry: [
        path.join(__dirname, 'private/main.js'),
        path.join(__dirname, '/private/sass/main.sass')
    ],
    // this is for the JS only
    output: {
        path: path.join(__dirname, '/assets/dist/'),
        // publicPath: "/static/",
        filename: '[name]-[chunkhash].js'
    },

    // Non-JS
    module: {
        loaders: [
            // sass
            {
                test: /\.s?css$|\.sass$/,
                loader: extract_text_plugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
            },

            // images
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },

            // Load fonts
            {
                test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                // this is incompatible with bootstrap-loader (glyphicons are not shown)
                // loader: "url-loader?limit=10000&mimetype=application/font-woff"
                loader: "url"
            },
            {
                test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                // // this is incompatible with bootstrap-loader (glyphicons are not shown)
                // loader: "file-loader"
                loader: "url"
            },

            {
                test: /\.modernizrrc$/,
                loader: "modernizr"
            }
        ]
    },

    resolve: {
        alias: {
            modernizr$: path.resolve(__dirname, "private/.modernizrrc"),
            // https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1662
            jquery: path.join(__dirname, 'node_modules/jquery/dist/jquery')
        }
    },

    plugins: [
        new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'}),
        new extract_text_plugin("[name]-[chunkhash].css", {allChunks: false}),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {screw_ie8: true, keep_fnames: true, warnings: false},
            mangle: {screw_ie8: true, keep_fnames: true}
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new bundle_tracker({filename: './webpack-stats.json'}),
        // following would patch occurencies of $ and jQuery in other scripts
        // clashes with global jQuery definition in the main entry point script
        // new webpack.ProvidePlugin({$: "jquery", jQuery: "jquery", "window.jQuery": "jquery"})
    ]

};


module.exports = validate(production_settings);

With jquery 3.1.1

Am I doing something wrong here?

[IlyaSemenov]

@macolo Now try actually using the datepicker, not only importing it. You will discover that $.fn.datetimepicker is undefined (because datepicker installed itself onto the nested jquery).

The generated webpack bundle will include two different jqueries as well. This is also why @IvanBernatovic's solution should not be used. @danielefenix's workaround is much better (although you'd better replace /dist/ with /src/).

[macolo]

@IlyaSemenov thanks for the insights - in that case I know why its working for me - I am already using @danielefenix's workaround as you can see in my webpack config.

[frutality]

@IlyaSemenov thanks for explanation. In my case bundle included three different jqueries. But with @danielefenix's workaround plugin works, and jquery is included only once.

[kkesley]

Hi, I don't use webpack and perhaps some of you too..
So I altered the library's file bootstrap-datetimepicker.js
and change

module.exports = $.fn.datetimepicker

and changed it into

module.exports = { datetimepicker: $.fn.datetimepicker, $: $ };

now all you have to do is import jquery inside your .js file
import {$} from 'eonasdan-bootstrap-datetimepicker'

remember if you use another jquery instance, you have to differentiate between the library's jQuery and your own page's jQuery

I solved this out of frustration so perhaps it's not a good solution.
Please tell me if it's a bad solution as I use this on a project

[kimboox44]

same problem here