将xdan / datetimepicker从2.4.0更新到2.5.4之后 - $ .datetimepicker未定义 [英] After updating xdan/datetimepicker from 2.4.0 to 2.5.4 - $.datetimepicker is undefined

问题描述

以前我用过xdan / datetimepickerv2.4.0。但我需要升级它，并在升级后它做鼻涕工作。
它会显示：

  vendor.js：20065 Uncaught TypeError：无法处理绑定with：function（）{返回$ root.manageView}
消息：无法处理绑定datetimepicker：function（）{return timeFrom}
消息：$ element.datetimepicker不是函数
  
 
 
有我的package.json文件： 
 
 
  {
name：App1，
version：1.0.0，
description：App1 Testing，
 main：./src/app/app.js，
scripts：{
test：
}，
browserify：{
transform：[
browserify-shim，
debowerify
] 
}，
浏览器：{
 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，
devowerify ：^ 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.jsfile： 
 
 
  // jQuery插件
 require（'jquery.cookie'）; 
 require（'jquery.datetimepicker'）; 
 require（'jquery.fileDownload'）; 
 require（'spectrum'）（window.jQuery）; // Shimmed 
 require（'bootstrap'）; // Shimmed 
 
 //将DataTable的插件暴露给其工作
 window.DataTable = require（'datatables'）; // Shimmed 
 require（'datatables.scroller'）; // Shimmed 
 
 //启用String.format功能
 require（'stringformat'）; // Shimmed 
 
 //其他供应商脚本
 //加载到这里以便它们不会出现在
 //主应用程序包中
 require（'knockout ）; 
 require（'moment'）; 
  
这是knockoutBinding.js：
  / *用于挖空的日期选择器值绑定* / 
（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 。的时间垫）; 
 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）; 
  
 那么从这里得到了什么。为什么没有找到$ element.datetimepicker？ 
解决方案
找到解决方案 - 它对我有用：
 
 
 
  paskage.json   
 $ b 
 浏览器 ：{
 ... 
jquery.datetimepicker：./node_modules/jquery-datetimepicker/jquery.datetimepicker.min.js
}，
browserify-shim ：{
 ... 
jquery.datetimepicker：{depends：[jquery：$]} 
}，
依赖关系：{
 ... 
jquery：^ 2.2.4，
jquery-datetimepicker：2.5.4，
} 
  
 
 
 github.com/xdan/datetimepicker/issues/392rel =nofollow>此处描述的错误。 
 
 
  gulpfile.js  
  var externalVendorModules = ['jquery'，'jquery.datetimepicker'，'moment']; 
  
  vendors.js  
  window.jQuery = require（'jquery'）; 
 require（'jquery.datetimepicker'）（window.jQuery）; 
  
 
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? 
解决方案
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);


                        
这篇关于将xdan / datetimepicker从2.4.0更新到2.5.4之后 -  $ .datetimepicker未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！