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不是函數

回答

相關問題