Using jquery plugin with Angular 5

Question

I'm using trying to use the following datepicker in my Angular 5 project but I'm not sure how to import it:-

https://bootstrap-datepicker.readthedocs.io/en/latest/index.html#

I'm using Angular CLI to build my project and I've added the bootstrap-datepicker.min.js file into my scripts section in my angular-cli.json file:-

  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../js/custom.js",
    "../js/bootstrap-datepicker.min.js"
  ]

And I've also imported JQuery into my Angular component:-

import * as $ from 'jquery';

..which does work as I can reference the $ object in my component and get a handle to a load of JQuery functions. However, when I do something like:-

$("dateField").datepicker()

It tells me the function is not available on the JQuery object. Does anyone have any ideas how to use this in Angular?

Thanks,

Adam

have you installed jquery types ??

Pranay Rana
– Pranay Rana

2018-04-25 10:34:27 +00:00
Commented Apr 25, 2018 at 10:34 — Pranay Rana
– Pranay Rana, Commented Apr 25, 2018 at 10:34

David · Accepted Answer · 2018-04-25 11:47:09Z

4

Instead of

import * as $ from 'jquery';

Try that

declare let $: any;

On a side note, don't use jQuery if you don't absolutely need it. There are plenty of angular calendar available, and ng-bootstrap is a native angular library providing bootstrap components, instead of bootstrap.js

edited Apr 25, 2018 at 11:47

answered Apr 25, 2018 at 10:47

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BigBytes Over a year ago

This did do the trick as I now have the datepicker function but I can't seem to get it to set up the control as a datepicker! Ah well another problem

David Over a year ago

Your datefield selector may not be valid?

BigBytes Over a year ago

I've rolled back my changes but yes it might be because I was doing $('datefield') rather than $('#datefield') so I'll try that when I get some time

burnt1ce Over a year ago

Thanks @David. This worked. Can you please explain why using declare works but not import?

David Over a year ago

@burnt1ce I think that if you use import, it'll import the basic jquery module to $, hence erasing the plugin's code also imported into $

Collectives™ on Stack Overflow

Using jquery plugin with Angular 5

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related