CODEWITHSUNDEEP
angular
Jason Ward
Jason Ward

Reputation: 125

ng-datetime datepicker is not a function

I have been looking into ng-datetime as an option to use for a datepicker for the application I am working on at work. I followed the instructions to the letter from: https://www.npmjs.com/package/ng2-datetime.

I installed both dependencies(bootstrap datepicker and bootstrap timepicker) before installing the ng-datetime itself, and added the references to the app.module file as well.

When I use it in my html page, however, I can see the control itself, but it is static, and I come up with the error: $(...).datepicker is not a function.

I found 3 other questions that address this error, but did not see any solutions that worked for me in those posts, thus the duplicate question.

Upvotes: 2

Views: 1152

Answers (2)

Chetan Ahire
Chetan Ahire

Reputation: 11

we have added the following entries to angular.cli.json` and it works.(angular 4.2)

`"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
    "../node_modules/bootstrap-timepicker/js/bootstrap-timepicker.js"
]`

Upvotes: 1

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: 0

Related Questions