After updating xdan/datetimepicker from 2.4.0 to 2.5.4 - $.datetimepicker is undefined

问题

Previously I used "xdan/datetimepicker" v2.4.0. But I needed to upgrade it and after upgrade it doe snot work. It trows:

vendor.js:20065 Uncaught TypeError: Unable to process binding "with: function (){return $root.manageView }"
Message: Unable to process binding "datetimepicker: function (){return timeFrom }"
Message: $element.datetimepicker is not a function

There is my "package.json" file:

{  
"name": "App1",
  "version": "1.0.0",
  "description": "App1 Testing",
  "main": "./src/app/app.js",
  "scripts": {
    "test": ""
  },
  "browserify": {
    "transform": [
      "browserify-shim",
      "debowerify"
    ]
  },
  "browser": {
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
    "jquery.datetimepicker": "./node_modules/jquery-datetimepicker/jquery.datetimepicker.js",
    "jquery.xdomainrequest": "./src/vendor/jquery.xdomainrequest.min.js",
    "datatables": "./src/vendor/datatables/jquery.dataTables.min.js",
    "datatables.bootstrap": "./src/vendor/datatables/dataTables.bootstrap.js",
    "datatables.scroller": "./src/vendor/datatables/dataTables.scroller.min.js",
    "spectrum": "./src/vendor/spectrum/spectrum.js",
    "stringformat": "./src/vendor/stringformat-1.09.min.js",        
    "jquery.fileDownload": "./src/vendor/jquery.fileDownload.js"
  },
  "browserify-shim": {        
    "translations": "global:translations",
    "jquery-datetimepicker": { "depends": [ "jquery:$" ] }
  },
  "author": "XXX",
  "license": "ISC",
  "devDependencies": {
    "bootstrap-sass": "^3.3.6",
    "browserify": "^13.0.0",
    "browserify-shim": "^3.8.12",
    "colors": "^1.1.2",
    "debowerify": "^1.3.1",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-replace": "^0.5.4",
    "gulp-ruby-sass": "^2.0.6",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.3",        
    "jquery.cookie": "^1.4.1",        
    "lodash": "^4.6.1",
    "moment": "^2.11.2",
    "phantomjs-prebuilt": "^2.1.4",
    "typescript": "^2.0.3",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "dependencies": {        
    "factor-bundle": "^2.5.0",
    "jquery": "^2.2.1",
    "jquery-datetimepicker": "2.5.4",
    "knockout": "^3.4.0",        
  }
}

"vendor.js" file:

// jQuery plugins
require('jquery.cookie');        
require('jquery.datetimepicker');
require('jquery.fileDownload');   
require('spectrum')(window.jQuery);     // Shimmed
require('bootstrap');                   // Shimmed

// Exposing DataTable for it's plugins to work
window.DataTable = require('datatables');   // Shimmed
require('datatables.scroller');             // Shimmed    

// Enables String.format functionality
require('stringformat');                    // Shimmed

// Other vendors scripts
// Loaded here so that they won't appear in the
// main app bundle
require('knockout');    
require('moment');

This is the knockoutBinding.js:

/* Date picker value binder for knockout */
    (function (ko) {
        ko.bindingHandlers.datetimepicker = {
            init: function (element, valueAccessor, allBindingsAccessor) {
                var $element = $(element);
                var value = valueAccessor(), allBindings = allBindingsAccessor();
                var valueUnwrapped = ko.utils.unwrapObservable(value);
                var options = allBindings.dtPickerOptions || {};    
                **$element.datetimepicker({**
                    step: 15,
                    format: config.timeFormat,
                    formatTime: config.timeFormatHours,
                    formatDate: config.timeFormatDate,                    
                    onChangeDateTime: function (dp, $input) {
                        var date = moment($input.val(), config.timeFormat);
                        date.set('second', 0);
                        var observable = valueAccessor();
                        observable(date.format(config.timeFormat));
                    },
                    lang: 'custom',
                    i18n : {
                        custom: translationController.datePicker
                    }                
                });

            },
            update: function (element, valueAccessor) {
                var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
                var obs = valueAccessor();
                $(element).val(moment(valueUnwrapped, config.timeFormat).format(config.timeFormat));
            }
        };
    })(ko);

So what is from here. Why the $element.datetimepicker is not found?

回答1:

Found solution - it worked for me:

paskage.json:

"browser": {
...
"jquery.datetimepicker": "./node_modules/jquery-datetimepicker/jquery.datetimepicker.min.js"
},
"browserify-shim": {
...
 "jquery.datetimepicker": { "depends": [ "jquery:$" ] }
},
"dependencies": {
    ...
    "jquery": "^2.2.4",
    "jquery-datetimepicker": "2.5.4",
}

Notes: Do not use not minified version ("jquery.datetimepicker.js"), because it has bug described here.

gulpfile.js

var externalVendorModules = ['jquery', 'jquery.datetimepicker','moment'];

vendors.js

window.jQuery = require('jquery');
require('jquery.datetimepicker')(window.jQuery);

来源：https://stackoverflow.com/questions/39763406/after-updating-xdan-datetimepicker-from-2-4-0-to-2-5-4-datetimepicker-is-und