ng2-datetime：TypeError：$（...）。datepicker不是函数

我安装了ng2-datetime＃v1.1.4（不是RC5版本）并尝试添加datetime组件到我的测试应用程序。我遇到了以下错误。请帮助，如果你知道它是什么。谢谢。

browser_adapter.js:84 TypeError: $(...).datepicker is not a function 
    at NKDatetime.init (http://localhost:3000/main.bundle.js:27185:59) 
    at NKDatetime.ngAfterViewInit (http://localhost:3000/main.bundle.js:27115:15) 
    at DebugAppView._View_Crud0.detectChangesInternal (Crud.template.js:1428:62) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20) 
    at DebugAppView._View_Crud_Host0.detectChangesInternal (Crud.template.js:40:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/vendor.bundle.js:60647:20) 
    at DebugAppView._View_ServicesMain0.detectChangesInternal (ServicesMain.template.js:376:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20) 
    at DebugAppView._View_ServicesMain_Host0.detectChangesInternal (ServicesMain.template.js:37:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/vendor.bundle.js:60647:20) 
    at DebugAppView._View_App0.detectChangesInternal (App.template.js:88:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20) 
    at DebugAppView._View_App_Host0.detectChangesInternal (App.template.js:40:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15) 
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45) 
    at ViewRef_.detectChanges (http://localhost:3000/vendor.bundle.js:47800:66) 
    at http://localhost:3000/vendor.bundle.js:34125:85

来源

2016-09-22 knt

我有同样的问题......所有的包都装......还我尝试安装分型定义引导-datetimepicker没有结果。 – equintas

您不包括jQuery的自举日期选择器插件作为在NG2-日期时间的自述指示。

https://github.com/nkalinov/ng2-datetime#dependencies

npm install --save bootstrap-datepicker

or use the bundled version from src/vendor/bootstrap-datepicker

这足以把

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

，它应该工作。

来源

2016-09-22 19:41:38

你说得对，所以我确定所有的依赖都完成了。所有文件都可以像以前一样加载404。但是，我仍然遇到同样的错误。我在ng2-datetime.ts的init（）中调试并得到第140行的异常==> private init（）：void if（（！this.datepicker && this.datepickerOptions！== false）{ this.datepicker = （ $（'＃'+ this.idDatePicker））。datepicker（this.datepickerOptions）; – knt

我进入jQuery，它显示上下文未定义在94行==>返回新的jQuery.fn.init（选择器，上下文）;我正在使用jQuery版本3.0.0 – knt

查看https://nkalinov.github.io/ng2-datetime/中的演示以获取使用示例。如果您的ng2-datetime版本支持，请检查您的Angular 2版本号。 –

这应该是一个评论亚历山大Ciesielski的答案，但我没有足够的声誉。抱歉。

我有ng2-datetime安装在我的应用程序和'工作'（日期选择器工作，只有时间选择器）。

然后，我使用gulp切换到angular-cli beta 15.经过多次破损修复（有点像把Humpty Dumpty放回到一起！），除了原始问题中的错误外，我再次使用它。

“自举日期选择器”已经安装在亚历山大的回答是：

npm install --save bootstrap-datepicker

我检查，它被包含在所生产的JS包，但我仍然得到错误。

我加入了明确的脚本标签包含在亚历山大的回答是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

现在，它的工作原理。（datepicker的工作原理，Timepicker不起作用，但它也没有给出错误，明确包括timepicker.js在这里没有帮助。）

希望这会有所帮助。包

版本node_modules：

ng2-datetime: 1.2.0 
bootstrap-datepicker: 1.6.4 
bootstrap-timepicker: 0.5.2

来源

2016-09-29 14:02:44 Bradley

我得到了同样的问题，用的WebPack，我有以下为我的jQuery是被添加到vendor.browser的的WebPack

config.entry = { 
    webapp:['./client/main.js'], //application generated code will be here 
    polyfills:['./client/polyfills.browser.js'], //pollyfills will be here 
    vendor:['./client/vendor.browser.js'] //external vendor files will be here. 
};

条目。 ts文件。以下代码

import { NKDatetime } from 'ng2-datetime/ng2-datetime'; 
@Component({ 
    ...  
    directives: [NKDatetime], 
})

在app.module.ts文件中。所以它无法在那里获取jQuery。

所以我做了以下改变。

将下面的代码

import { NKDatetime } from 'ng2-datetime/ng2-datetime'; 
export {NKDatetimeModule} //export the ng2 module from the vendor.ts file.

在vendor.ts文件。

和

//import the exported ng2-datetime module here. 
import { NKDatetimeModule } from '../../vendor.browser'; 
@Component({ 
    ... 
    directives: [NKDatetime], 
})

在我app.module.ts文件。

和它的作品...

来源

2017-04-03 21:10:03

我有同样的问题，但我使用angular-webpack2-starter bootstrap分支，没有vendor.ts文件...如何解决这个问题？ https://github.com/qdouble/angular-webpack2-starter/tree/bootstrap v – Francesco

添加这vendor.ts

import 'bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css'; 
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'; 
import 'bootstrap-timepicker/css/bootstrap-timepicker.min.css'; 
import 'bootstrap-timepicker/js/bootstrap-timepicker.js';

来源

2017-08-17 20:09:10

ng2-datetime：TypeError：$（...）。datepicker不是函数

回答

相关问题