CODEWITHSUNDEEP
angular
knt
knt

Reputation: 143

ng2-datetime : TypeError: $(...).datepicker is not a function

I install ng2-datetime#v1.1.4 (not RC5 version) and try to add datetime component to my test application. I run into the following error. Please help if you know what it is. Thanks.

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

Upvotes: 1

Views: 5157

Answers (4)

arn-arn
arn-arn

Reputation: 1377

Add this to 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';

Upvotes: 0

Dinesh Dabhi
Dinesh Dabhi

Reputation: 856

I got the same issue with webpack, I have following entries for the 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.
};

My jQuery is been added to vendor.browser.ts file. And following code

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

was in app.module.ts file. So It's not able to fetch the jQuery there.

So I have made following change.

Set the following code

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

In vendor.ts file.

and

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

In my app.module.ts file.

And It works...

Upvotes: 1

Bradley
Bradley

Reputation: 53

This should be a comment on Alexander Ciesielski's answer, but I don't have enough reputation for that. Sorry.

I had ng2-datetime installed in my app and 'working' (the datepicker was working, the timepicker only sometimes).

Then I switched from using gulp to angular-cli beta 15. After lots breakage fixing (a bit like putting Humpty Dumpty back together!), I got it working again except for the error in the original question.

"bootstrap-datepicker" had been installed as in Alexander's answer:

npm install --save bootstrap-datepicker

I checked and it is included in the produced js bundle, but I still get the error.

I added the explicit script tag inclusion as in Alexander's answer:

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

Now it works. (Well datepicker works. Timepicker doesn't work, but it doesn't give an error either. Explicitly including timepicker.js doesn't help here.)

Hope this helps.

Versions of packages in node_modules:

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

Upvotes: 0

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10834

You did not include the jquery bootstrap-datepicker plugin as instructed in the readme of ng2-datetime.

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

npm install --save bootstrap-datepicker

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

It's enough to put the

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

and it should work.

Upvotes: 0

Related Questions