包装在TypeScript函数中的JavaScript函数不起作用

Question

I am trying to implement a datepicker whose button upon being clicked displays a calendar. For this purpose, I have wrapped datepicker() (JavaScript function) in pickDate() (user defined TypeScript function) but the button is not clicking/displaying anything . What could be going wrong?

Below are my code snippets

HTML file

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon" (click)="pickDate()">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

.ts file

import {Component} from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector : 'pm-datepicker', /** This is a directive which implies this Component's template can be
    used as any other Component's template.  */
    templateUrl : './datepicker.component.html' /** Path to our HTML file */
})

export class DatePickerComponent {

    pickDate() {
        console.log(5); /** To check if something is logging */
        $('#datetimepicker1').datepicker();
    }
}

Errors on console

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).datepicker is not a function
    at DatePickerComponent.webpackJsonp.../../../../../src/app/datepicker/datepicker.component.ts.DatePickerComponent.pickDate (datepicker.component.ts:18)
    at Object.eval [as handleEvent] (DatePickerComponent.html:21)
    at handleEvent (core.es5.js:11998)
    at callWithDebugContext (core.es5.js:13467)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
    at dispatchEvent (core.es5.js:8614)
    at core.es5.js:9228
    at HTMLSpanElement.<anonymous> (platform-browser.es5.js:2648)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)

Edit 2

I carried out the following steps :

npm install jquery-ui --save

and then I included the script URLs with respect to jQuery and jQuery-ui in index.html but the errors still persist. Is there anything specifically I need to import in my component.ts or app.module.ts ?

Answer 1

Issue might be

1. If there is any other library using $ variable
2. may be missing some files from jQuery

If nothing works then include datepicker.js also

 <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.js"></script> 

Answer 2

Looks like you're going to need to include $.datepicker to get that function. Since it seems you're using webpack, this should be a simple npm install jquery-ui to get the whole jquery-ui package or npm install jquery-datepicker to just get the datepicker module.

You'll also need to include this in your source before you use it (or add it as an entry point to webpack).