Fatal编程技术网
  • angular/
  • Angular ng2 datetime:TypeError:$（…）。datepicker不是函数

Angular ng2 datetime:TypeError:$（…）。datepicker不是函数

angular

Angular ng2 datetime:TypeError:$（…）。datepicker不是函数,angular,Angular,我安装了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.ngAfte

我安装了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
您没有按照ng2 datetime自述中的说明包含jquery引导datepicker插件

npm安装--保存引导数据采集器

或者使用捆绑版本 来自src/vendor/bootstrap日期选择器

这就足够了

这应该是对Alexander Ciesielski回答的评论，但我没有足够的声誉。对不起

我在我的应用程序中安装了ng2 datetime，并且“正在工作”（日期选择器正在工作，时间选择器有时才工作）

然后我从大口喝改用15号。经过大量修复（有点像把Humpty Dumpty重新组装起来！），我让它重新工作，除了原来问题中的错误

“bootstrap datepicker”已按照Alexander的回答安装：

npm install --save bootstrap-datepicker

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
我检查过了，它包含在生成的js包中，但我仍然得到了错误

我在Alexander的回答中添加了显式脚本标记包含：

npm install --save bootstrap-datepicker

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
我的网页也有同样的问题， 我有以下的网页条目

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.
};
My jQuery已添加到vendor.browser.ts文件中。和下面的代码

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

import { NKDatetime } from 'ng2-datetime/ng2-datetime';
export {NKDatetimeModule} //export the ng2 module from the vendor.ts file.
在app.module.ts文件中。因此它无法在那里获取jQuery

所以我做了如下改变

设置以下代码

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

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

及

在我的app.module.ts文件中

它可以工作…

将此添加到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';
你是对的，所以我要确保所有的依赖都完成了。所有文件都加载正常，不像以前的404。然而，我仍然得到同样的错误。我调试ng2-datetime.ts==>private init（）：void{if（！this.datepicker&&this.datepickerOptions！==false）{this.datepicker=（$（'#'+this.idDatePicker））.datepicker（this.datepickerOptions）；我在jQuery内部进行了一步，它在第94行显示上下文未定义==>returnnewjquery.fn.init（选择器，上下文）；我使用的是jQuery 3.0.0版。请检查下的演示以了解用法示例。同时检查Angular 2版本号是否受ng2-datetime版本的支持。谢谢，我会这样做。该组件已添加到我的页面中，但当我单击它时，会出现异常。祝您愉快。我遇到了相同的问题…所有捆绑包都已加载…我也尝试了安装引导datetimepicker的typings定义时没有结果。我有相同的问题，但我使用的是angular-webpack2-starter引导分支，没有vendor.ts文件…如何解决此问题？v